- 前言
本文先讲解WebSocket的应用场景和特点，然后通过前后端示例代码讲解，展示在实际的开发中的应用。
1.1. 应用场景
WebSocket是一种在单个TCP连接上进行全双工通信的协议, 是为了满足基于 Web 的日益增长的实时通信需求而产生的。我们平时接触的大多数是HTTP的接口，但是在有些业务场景中满足不了我们的需求，这时候就需要用到WebSocket。简单举两个例子：
（1） 页面地图上要实时显示在线人员坐标：传统基于HTTP接口的处理方式是轮询，每次轮询更新最新的坐标信息。
（2）手机的付款码页面，在外界设备扫描付款码支付成功后，手机付款码页面提示“支付成功”并自动关闭：传统方式还是轮询，付款码页面一直调用接口，直到从服务器获取成功支付的状态后，手机提示“支付成功”并关闭付款码页面。
HTTP 协议有一个缺陷：通信只能由客户端发起。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。但这种方式即浪费带宽（HTTP HEAD 是比较大的），又消耗服务器 CPU 占用（没有信息也要接受请求）。
在WebSocket API尚未被众多浏览器实现和发布的时期，开发者在开发需要接收来自服务器的实时通知应用程序时，不得不求助于一些“hacks”来模拟实时连接以实现实时通信，最流行的一种方式是长轮询 。 长轮询主要是发出一个HTTP请求到服务器，然后保持连接打开以允许服务器在稍后的时间响应（由服务器确定）。为了这个连接有效地工作，许多技术需要被用于确保消息不错过，如需要在服务器端缓存和记录多个的连接信息（每个客户）。虽然长轮询是可以解决这一问题的，但它会耗费更多的资源，如CPU、内存和带宽等，要想很好的解决实时通信问题就需要设计和发布一种新的协议
1.2. WebSocket定义
WebSocket是一种协议，是一种与HTTP 同等的网络协议，两者都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
相比于传统HTTP 的每次“请求-应答”都要client 与 server 建立连接的模式，WebSocket 是一种长连接的模式。就是一旦WebSocket 连接建立后，除非client 或者 server 中有一端主动断开连接，否则每次数据传输之前都不需要HTTP 那样请求数据。
WebSocket 对象提供了一组 API，用于创建和管理 WebSocket 连接，以及通过连接发送和接收数据。浏览器提供的WebSocket API很简洁，调用示例如下：
1.png
HTTP、WebSocket 等应用层协议，都是基于 TCP 协议来传输数据的。我们可以把这些高级协议理解成对 TCP 的封装。既然大家都使用 TCP 协议，那么大家的连接和断开，都要遵循 TCP 协议中的三次握手和四次握手 ，只是在连接之后发送的内容不同，或者是断开的时间不同。对于 WebSocket 来说，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。
- 后端WebSocket服务（SpringBoot）
pom.xml
2.png
在配置类@Configuration下注册ServerEndpointExporter的Bean，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
3.png
创建WebSocket的工具类WebSocket.java
4.png
5.png
到此WebSocket的代码就结束了，运行该SpringBoot项目，对应的WebSocket地址为：ws://127.0.0.1:port/websocket/{userId}
可以在 WebSocket在线测试网站](http://www.blue-zero.com/WebSocket/) 上测试后端接口。
- 前端WebSocket调用（Angular）
3.1. npm依赖
安装 rxjs 的依赖库
6.png
安装websocket 依赖库
7.png
安装类型定义文件
8.png
3.2. WebSocket Service
创建 WebSocket 的Service文件
9.png
上述命令生成了websocket.service.ts文件，示例代码为：
10.png
3.3. Demo演示
简单做个demo页面，有留言板和输入框。同时开多个浏览器页面，只要在任意一个页面的输入框中输入文字，所有页面的留言板上都会实时显示出来。
11.png
示例的代码提供，app.component.html
12.png
app.component.ts
13.png
app.component.css
14.png
本人创业团队产品MadPecker，主要做BUG管理、测试管理、应用分发，网址:www.madpecker.com，有需要的朋友欢迎试用、体验！
本文为MadPecker团队技术人员编写，转载请标明出处
网友评论