WebSocket，再也不“轮询”

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团队技术人员编写，转载请标明出处