当前位置：首页 > news >正文

WebSocket介绍

news 来源：原创 2025/4/22 20:21:47

在网页聊天项目中，为了实现消息的发送和及时接收，我们使用了WebSocket，接下来就简单介绍一下这个WebSocket。

了解消息的转发逻辑

当两个不同客户端在不同的局域网中互相发送消息时，假如这两个客户端分别是a和b，因为a和b在不同的局域网中，a发出的消息是不能直接转发给b，因为a没有b的ip地址，这时候就要通过服务器来转发a的消息给b。

为什么服务器就能将a的消息成功转发给b呢？

因为消息在发送到服务器时，会经过NAT（网络地址转换）设备，NAT设备会将客户端a和客户端b私网IP地址一起映射到服务器上同一个公网的IP地址上，并且通过不同的端口号来区别不同的连接，这样就可以通过公网的IP地址实现客户端之间消息的转发

简单来说，不同局域网之间的用户是不能直接转发消息的，需要通过服务器进行转发消息。

1.什么是WebSocket

WebSocket其实也是一个应用层协议，WebSocket是一种全双工通信协议，它允许客户端和服务器在一次TCP连接中进行双向实时数据传输，也允许服务器主动向客户端转发消息。

为什么不用HTTP协议来实现消息的转发功能呢？

在上面消息转发逻辑的分析中，知道消息的转发功能主要通过服务器转发来实现消息的发送与转发，而HTTP协议是一种一问一答的形式，一问一答是HTTP协议的主要模式，一问一答就是只有客户端向服务器发送一个HTTP请求，服务器才会给客户端返回一个HTTP响应，而不是服务器主动去发送一个消息给客户端，且在HTTP协议中实现服务器向客户端转发消息是比较麻烦的。

在HTTP协议中，可以采用轮询的方式实现服务器主动向客户端转发消息，比如客户端每个500ms就像客户端发送一个请求，询问服务器有没有发给我的消息，如果有就获取到，如果没有，就先sleep。

但是，这种轮询的方式是由很大的问题的，如果这个服务器的客户端很多，轮询的方式就会消耗更多的系统资源，也就是消息接收方会频繁的向服务器发送请求，但是这些请求中大部分是空转的请求（没有得到服务器响应的请求）

其次就是获取消息不够及时，需要等待下一个周期才能获取到消息。

此时，如果我们提高轮询的频率，此时获取消息就及时了，但是消耗的系统资源就越多了，如果我们降低轮询的频率，此时消耗系统资源就少了，但是获取消息就不及时了。

所以，我们采用更加简单高效的WebSocket协议来实现。

2.WebSocket协议格式

在WebSocket中，有3比较关键的信息。

第一个关键信息：opcode

opcode操作码描述了wensocket数据帧是起到啥作用的，如果opcode取值0x1表示传送的是文本数据，如果opcode取值0x2表示传送的是二进制数据。

第二个关键信息：payload lenth

payload lenth就是数据报上要携带的具体数据，能够表示7个bit的范围，也就是0~127，单位是字节。为了能够携带足够大的数据，payload lenth有三种模式。第一种模式就是7个bit，表示范围较小，第二种模式就是16bit模式，能表示的范围就更大了，第三种模式就是64bit模式，能表示的方位就非常非常大了。

当最初的7个bit的payload lenth小于126时，payload lenth就是模式1，如果7个bit的payload lenth等于126，payload lenth就是模式2，如果7个bit的值等于127，payload lenth就是模式3

第三个关键信息：payload data

payload data就是真正要传输的数据载荷。

3.WebSocket的握手过程

首先客户端会向服务器发送一个HTTP请求，这个HTTP请求中会带有一些特殊的header，例如Connection：upgrade和Upgrade：WebSocket，这两个header信息客户端询问服务器是否愿意升级为WebSocket，而服务器给客户端返回的响应也带有这两个特殊的header，表示服务器愿意升级。在这个过程之后，客户端和服务器之间就相当于建立好websocket连接了，接下来也可以使用websocket来传输信息了。

4.WebSocket代码示例

首先，要引入依赖

		<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

服务端代码：

创建一个类并继承TextWebSocketHandler ，重写TextWebSocketHandler 类中的4个方法，如一下代码

@Slf4j
@Component
public class TextWebSocketController extends TextWebSocketHandler {@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {//这个方法会在webSocket建立连接之后，spring会自动调用这个方法log.info("webSocket建立连接成功");}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {//这个方法会在webSocket收到消息之后，被自动调用log.info("webSocket成功接收消息："+message.toString());//将信息返回//session里面就已经记录了通信双方是谁了(及通信双方)session.sendMessage(message);}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {//连接出现异常，被自动调用log.info("webSocket建立连接出现异常");}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {//连接正常关闭之后，自动调用log.info("webSocket连接关闭成功");}
}

接着将上述类的实例注册到spring中，并配置路由，也是创建一个类并implements WebSocketConfigurer ，重写方法,注意要加上@Configuration和@EnableWebSocket注解

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Autowiredprivate TextWebSocketController textWebSocketController;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(textWebSocketController,"/test");//通过这个拦截器，可以将HttpSession中存的键值对复制一份到WebSocketSession中去.addInterceptors(new HttpSessionHandshakeInterceptor());}
}

客户端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试webSocket的使用</title>
</head>
<body><input type="text" id="message"><button id="send-button">发送</button><script>//创建一个webSocket实例let websocket=new WebSocket("ws://127.0.0.1:8080/test");websocket.onopen = function(){console.log("websocket连接成功");}websocket.onclose = function(){console.log("websocket连接断开");}websocket.onerror = function(){console.log("websocket连接异常");}websocket.onmessage = function(e){console.log("websocket收到消息："+e.data);}let messageInput = document.querySelector("#message");let sendButton = document.querySelector("#send-button");sendButton.onclick = function() {console.log("websocket发送消息："+messageInput.value);websocket.send(messageInput.value);}</script>
</body>
</html>