最近有个项目需要用到websocket。一开始觉得很简单，但是遇到问题，加深理解后，才发现websocket并没有想象中那么简单。这篇文章主要考虑在客户端使用websocket。1、http和websockethttp超文本传输??协议大家都很熟悉了。http有几个版本1.0、1.1和2.0。从http1.1开始，默认开启Keep-Alive来保持连接的连续性。简单的说，当一个网页被打开后，客户端和服务端之间用来传输http数据的TCP连接是不会关闭的。如果客户端再次访问服务器上的网页，会继续使用已经建立的连接，减少了资源消耗。消费优化性能，但Keep-Alive也有时间限制，客户端只能主动发起请求获取返回数据，不能主动接收后台推送的数据，于是websocket应运而生。Websocket是html5新加入的特性之一。目的是在浏览器和服务器之间建立一种全双工的通信模式，解决http请求-响应带来的过度资源消耗，为特殊场景应用提供一种新的实现方式，比如聊天，炒股，游戏和其他对实时性要求高的行业。http和websocket都是基于TCP（传输控制协议）的。Websocket可以看作是对http协议的补充。2.SockJsSockJS是一个JavaScript库。为了应对很多浏览器不支持WebSocket协议的问题，设计了一个替代的SockJs。.SockJS是WebSocket技术的模拟。SockJS会尽量对应WebSocketAPI，但是如果没有WebSocket技术，会自动降为轮询。3.StompjsSTOMP——SimpleTextOrientedMessageProtocol——一种面向消息的简单文本协议。SockJS提供了WebSocket的替代方案。但不管是什么场景，这种通信方式对于实际应用来说都太低级了。STOMP协议为浏览器和服务器之间的通信添加适当的消息语义。4、WebSocket、SockJs、STOMP的关系简而言之，WebSocket是底层协议，SockJS是WebSocket的替代品，也是底层协议，而STOMP是基于WebSocket（SockJS）的上层协议。1、HTTP协议解决了Web浏览器发起请求和Web服务器响应请求的细节问题。假设不存在HTTP协议，只能使用TCPsockets来编写web应用程序。2、直接使用WebSocket（SockJS）与使用TCPsockets编写web应用程序非常相似。因为没有高层协议，我们需要定义应用程序之间发送消息的语义，我们也需要保证连接的两端都能遵循这些语义；3.就像HTTP在TCP套接字上增加了一个请求-响应模型层一样，STOMP在WebSocket之上提供了一个基于帧的行格式层来定义消息语义；5.使用examples安装sockjs-client、stompjs；这里注意一下，我发现版本"stompjs":"^2.3.3"，在引入stompjs的时候会报找不到net模块，需要在stompjs的根目录下执行npminstallnet模块。这是一个奇妙的问题。导入模块：从'sockjs-client'导入SockJS；importStompfrom'stompjs';//连接函数letnumber=1;functionreconnect(socketUrl){leturl=`${BASE_URL}/ws/sdfpoint`;//连接地址//建立连接对象（连接尚未发起）letsocket=newSockJS(url);//获取STOMP子协议的客户端对象letstompClient=Stomp.over(socket);//向服务器发起websocket连接并发送CONNECT帧stompClient.connect({},//添加客户端认证信息functionconnectCallback(){//连接成功的回调函数//订阅频道stompClient.subscribe('/topic/display/control',function(data){if(data){console.log('subscribedata',data);}})},functionerrorCallBack(error){//连接失败时再次调用函数number+=1;if(number<=10){reconnect(url);}console.log('error',error);})}总结：websocket在客户端的实现看似比较简单，但是需要良好的配合和配合后台调试，以达到最佳效果。通过SockJS和Stomp的浏览器兼容性增加了消息语义并增强了可用性。要想彻底了解websocket，我们还需要对一些底层原理和相关知识有深入的了解。
