共计 2032 个字符，预计需要花费 6 分钟才能阅读完成。
1.前言
本文先讲解 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 很简洁，调用示例如下：
HTTP、WebSocket 等应用层协议，都是基于 TCP 协议来传输数据的。我们可以把这些高级协议理解成对 TCP 的封装。既然大家都使用 TCP 协议，那么大家的连接和断开，都要遵循 TCP 协议中的三次握手和四次握手，只是在连接之后发送的内容不同，或者是断开的时间不同。对于 WebSocket 来说，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。
2.后端 WebSocket 服务（SpringBoot）
pom.xml
在配置类 @Configuration 下注册 ServerEndpointExporter 的 Bean，这个 bean 会自动注册使用了 @ServerEndpoint 注解声明的 Websocket endpoint
创建 WebSocket 的工具类 WebSocket.java
3. 到此 WebSocket 的代码就结束了，运行该 SpringBoot 项目，对应的 WebSocket 地址为：ws://127.0.0.1:port/websocket/{userId}
可以在 WebSocket 在线测试网站 上测试后端接口。
前端 WebSocket 调用（Angular）
3.1. npm 依赖
安装 rxjs 的依赖库
安装 websocket 依赖库
安装类型定义文件
3.2. WebSocket Service
创建 WebSocket 的 Service 文件
上述命令生成了 websocket.service.ts 文件，示例代码为：
3.3. Demo 演示
简单做个 demo 页面，有留言板和输入框。同时开多个浏览器页面，只要在任意一个页面的输入框中输入文字，所有页面的留言板上都会实时显示出来。
示例的代码提供，app.component.html
app.component.ts
app.component.css
本人创业团队产品 MadPecker，主要做 BUG 管理、测试管理、应用分发，网址:www.madpecker.com，有需要的朋友欢迎试用、体验！
本文为 MadPecker 团队技术人员编写，转载请标明出处
