WebSocket学习心得

吻561

于 2025-05-08 17:06:22 发布

阅读量785

点赞数 16

CC 4.0 BY-SA版权

文章标签： websocket 服务器网络协议

本文链接：https://blog.csdn.net/weixin_65085529/article/details/147795502

一、什么是WebSocket

1、WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

2、WebSocket本质上是一种计算机网络应用层的协议，用来弥补HTTP协议在持久通信能力的不足。

3、WebSocket最大特点是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

1）建立在TCP协议之上，服务器端的实现比较容易。

2）与HTTP协议有良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器。

3）数据格式比较轻量，性能开销小，通信高效。

4）可以发送文本，也可以发送二进制数据。

5）没有同源限制，客户端可以与任意服务器通信。

6）协议标识符是ws（如果加密，则为wss），服务器网址就是URL。

二、为什么需要WebSocket

HTTP有一个缺陷，即通信只能由客户端发起，不具备服务器推送能力。例如，我们想了解查询今天的实时数据，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端想要获知就非常麻烦。只能使用轮询的方式，每隔一段时间就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源。

HTTP协议本身是没有持久通信能力的，但是我们在实际的应用中是很需要这种能力的，所以，为了解决这些问题，WebSocket协议由此而生，于2011年被IEFT定为标准RFC6455，并被RFC7936所补充规范。并且在HTML5标准中增加了有关WebSocket协议的相关api，所以只要实现HTML5标准的客户端就可以与支持WebSocket协议的服务器进行全双工的持久通信。

三、WebSocket与HTTP的区别

相同点：都是一样基于TCP的，都是可靠性传输协议，都是应用层协议。

联系：WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输的时候是不需要HTTP协议的。

不同点：

1、WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息，而HTTP是单向的；

2、WebSocket是需要浏览器和服务器握手进行建立连接的，而HTTP是浏览器发起向服务器的连接。

虽然HTTP/2也具备服务器推送功能，但是HTTP/2只能推送静态资源，无法推送指定的信息。

四、WebSocket连接过程

首先客户端发起HTTP请求，经过3次握手后，建立TCP连接，HTTP请求里存放WebSocket支持的版本好等信息，如：Upgrade、Connection、WebSocket-Version等。

然后服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。

最后客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

五、WebSocket的优缺点

优点：

1、WebSocket协议一旦建立后，互相沟通消耗的请求头是很小的。

2、服务器可以向客户端推送信息。

缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别（IE10）。

六、WebSocket应用场景

1、即时聊天通信

2、多玩家游戏

3、在线协同编辑

4、实时数据流的拉取与推送

5、体育/游戏实况

6、实时地图位置

七、WebSocket维持连接

WebSocket可以建立心跳机制维持连接，所谓心跳机制，就是定时发送一个数据包，让对方知道自己在线且正常工作，确保通信有效。如果对方无法响应，便可以弃用旧连接建立新连接了。

需要重连的场景可能包括：网络问题或者机器故障导致连接断开、连接没断但不可用了或者连接对端的服务不可用了等等。

发送方->接收方：ping

接收方->发送方：pong

ping、pong的操作，对应的是WebSocket的两个控制帧，Opcode分别是0x9、0xA。比如说，WebSocket服务端向客户端发送ping：

// ping

wx.ping();

// pong

ws.on('pong',()=>{

        console.log("pong received");

});

客户端也可以发送：

// 发送心跳包

ws.send('heart check');

// 接收响应

ws.onmessage = (e)  =>{

        const response = e.data;

        if(response.message === 'connection alive'){

                // 重置计时器

        }

}