JavaScript — WebStock

wangyang

实现原理： 实现了客户端与服务端的双向通信，只需要连接一次，就可以相互传输数据，很适合实时通讯、数据实时更新等场景。
Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议，为了兼容 HTTP 握手规范，在握手阶段依然使用 HTTP 协议，握手完成之后，数据通过 TCP 通道进行传输。
Websoket 数据传输是通过 frame 形式，一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输，不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息，提高传输效率。
优点： 双向通信。客户端和服务端双方 都可以主动发起通讯。 没有同源限制。客户端可以与任意服务端通信，不存在跨域问题。 数据量轻。第一次连接时需要携带请求头，后面数据通信都不需要带请求头，减少了请求头的负荷。 传输效率高。因为只需要一次连接，所以数据传输效率高。
缺点： 长连接需要后端处理业务的代码更稳定，推送消息相对复杂； 兼容性，WebSocket 只支持 IE10 及其以上版本。 服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一； 【需要后端代码稳定，受网络限制大，兼容性差，维护成本高，生态圈小】

1. // 创建 WebSocket 连接
   
2.     const socket = new WebSocket('wss://echo.websocket.org');
   
3. 
   
4.     // 连接建立时的回调函数
   
5.     socket.onopen = function (event) {
   
6.         console.log('WebSocket 连接已建立');
   
7. 
   
8.         // 发送消息给服务器
   
9.         socket.send('Hello, Server!');
   
10.     };
    
11. 
    
12.     // 接收到消息时的回调函数
    
13.     socket.onmessage = function (event) {
    
14.         console.log('收到服务器消息：', event.data);
    
15.     };
    
16. 
    
17.     // 连接关闭时的回调函数
    
18.     socket.onclose = function (event) {
    
19.         console.log('WebSocket 连接已关闭');
    
20.     };
    
21. 
    
22.     // 发生错误时的回调函数
    
23.     socket.onerror = function (error) {
    
24.         console.error('WebSocket 出现错误：', error);
    
25.     };
    
26. 
    

复制代码