WebSocket学习笔记

1 概述

1.1 WebSocket简介

WebSocket是一种协议，用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接，这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发，并于2011年成为标准。

• WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

• 在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

1.2 WebSocket优劣势

优势：

• 实时性： 由于WebSocket的持久化连接，它可以实现实时的数据传输，避免了Web应用程序需要不断地发送请求以获取最新数据的情况。

• 双向通信（全双工）： WebSocket协议支持双向通信，这意味着服务器可以主动向客户端发送数据，而不需要客户端发送请求。

• 减少网络负载： 由于WebSocket的持久化连接，它可以减少HTTP请求的数量，从而减少了网络负载。

劣势：

• 需要浏览器和服务器都支持： WebSocket是一种相对新的技术，需要浏览器和服务器都支持。一些旧的浏览器和服务器可能不支持WebSocket。

• 需要额外的开销： WebSocket需要在服务器上维护长时间的连接，这需要额外的开销，包括内存和CPU。

• 安全问题： 由于WebSocket允许服务器主动向客户端发送数据，可能会存在安全问题。服务器必须保证只向合法的客户端发送数据。

1.3 与HTTP协议的区别

HTTP协议有一个缺陷：通信只能由客户端发起。因为一般的请求都是HTTP请求（单向通信），HTTP是一个短连接（非持久化），且通信只能由客户端发起，HTTP协议做不到服务器主动向客户端推送消息。而WebSocket的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

2 基本概念

2.1 协议

WebSocket 协议是一种基于TCP的协议，用于在客户端和服务器之间建立持久连接，并且可以在这个连接上实时地交换数据。WebSocket协议有自己的握手协议，用于建立连接，也有自己的数据传输格式。

WebSocket连接在端口80 (ws)或者443 (wss)上创建，与HTTP使用的端口相同，这样,基本上所有的防火墙都不会阻止WebSocket连接。此外WebSocket支持跨域，可以避免Ajax的限制。

总之，WebSocket协议是一种可靠的、高效的、双向的、持久的通信协议，它适用于需要实时通信的Web应用程序，如在线游戏、实时聊天等。

2.2 生命周期

WebSocket 生命周期描述了 WebSocket 连接从创建到关闭的过程。一个 WebSocket 连接包含以下四个主要阶段：

• 连接建立阶段（Connection Establishment）： 在这个阶段，客户端和服务器之间的 WebSocket 连接被建立。客户端发送一个 WebSocket 握手请求，服务器响应一个握手响应，然后连接就被建立了。

• 连接开放阶段（Connection Open）： 在这个阶段，WebSocket 连接已经建立并开放，客户端和服务器可以在连接上互相发送数据。

• 连接关闭阶段（Connection Closing）： 在这个阶段，一个 WebSocket 连接即将被关闭。它可以被客户端或服务器发起，通过发送一个关闭帧来关闭连接。

• 连接关闭完成阶段（Connection Closed）： 在这个阶段，WebSocket 连接已经完全关闭。客户端和服务器之间的任何交互都将无效。

sequenceDiagram
Client ->>Server: 1.WebSocket握手请求
Server ->>Client: 2.WebSocket握手响应
Client ->> Server: 3.WebSocket连接开放
Server ->> Client: 3.WebSocket连接开放
Server ->> Client: 4.WebSocket连接关闭

2.3 消息格式

WebSocket 消息格式由两个部分组成：消息头和消息体。

消息头包含以下信息：

• FIN： 表示这是一条完整的消息，一般情况下都是1。

• RSV1、RSV2、RSV3： 暂时没有使用，一般都是0。

• Opcode： 表示消息的类型，包括文本消息、二进制消息等。

• Mask： 表示消息是否加密。

• Payload length： 表示消息体的长度。

• Masking key： 仅在消息需要加密时出现，用于对消息进行解密。

消息体就是实际传输的数据，可以是文本或二进制数据。

2.4 API

WebSocket API 是用于在 Web 应用程序中创建和管理 WebSocket 连接的接口集合。WebSocket API 由浏览器原生支持，无需使用额外的 JavaScript 库或框架，可以直接在 JavaScript 中使用。

let ws = new WebSocket('ws://example.com/ws');

WebSocket.send() 方法： WebSocket.send() 方法用于向服务器发送数据。它接受一个参数，表示要发送的数据。数据可以是字符串、Blob 对象或 ArrayBuffer 对象。例如：

ws.send('Hello, server!');

WebSocket.onopen 事件： WebSocket.onopen 事件在 WebSocket 连接成功建立时触发。例如：

ws.onopen = function() {console.log('WebSocket 连接已经建立。');
};

WebSocket.onmessage 事件： WebSocket.onmessage 事件在接收到服务器发送的消息时触发。它的 event 对象包含一个 data 属性，表示接收到的数据。例如：

ws.onmessage = function(event) {console.log('收到服务器消息：', event.data);
};

WebSocket.onerror 事件： WebSocket.onerror 事件在 WebSocket 连接出现错误时触发。例如：

ws.onerror = function(event) {console.error('WebSocket 连接出现错误：', event);
};

WebSocket.onclose 事件： WebSocket.onclose 事件在 WebSocket 连接被关闭时触发。例如：

ws.onclose = function() {console.log('WebSocket 连接已经关闭。');
};

3 应用示例

需求：多个前端用户通过WebSocket连接到后端的某个业务接口上，后端定时或实时将数据发送到前端。

3.1 后端

整体架构

• 依赖

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

• WebSocket配置

固定写法：

/** * websocket * 的配置信息 */ 
@Configuration 
public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } 
}

• WebSocket的服务类

相当于三层架构中的Controller。

1. @ServerEndpoint("/api/pushMessage/{userId}") 前端通过此 URI 和后端交互，建立连接

2. @OnOpen websocket 建立连接的注解，前端触发上面 URI 时会进入此注解标注的方法

3. @OnMessage 收到前端传来的消息后执行的方法

4. @OnClose 顾名思义关闭连接，销毁 session

5. 因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller

6. 新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket，方便IM之间对userId进行推送消息

注意这里存储的是sessionId，而不是userId。

@Getter  
@Component  
@Slf4j  
@ServerEndpoint("/api/websocket/service1")  
public class WebSocketServerService1 {  /* 最大在线人数 */    public static int socketMaxOnlineCount = 100;  private static final Semaphore socketSemaphore = new Semaphore(socketMaxOnlineCount);  /* concurrent包的线程安全Set，用来存放每个客户端对应的Session对象 */    /* key: sessionId value: WebSocketServer */    private static final Map<String, WebSocketServerService1> webSocketMap = new ConcurrentHashMap<>();  /* 当前的Session */  private Session session;  /* 连接建立成功调用的方法 */    @OnOpen  public void onOpen(Session session) {  this.session = session;  String sessionId = session.getId();  // 尝试获取信号量  boolean semaphoreFlag = SemaphoreUtils.tryAcquire(socketSemaphore);  if (!semaphoreFlag) {  // 未获取到信号量  log.error("当前在线人数超过限制数 - {}", socketMaxOnlineCount);  this.sendMessage(session, "当前在线人数超过限制数：" + socketMaxOnlineCount);  try {  session.close();  } catch (IOException e) {  throw new RuntimeException(e);  }  } else {  webSocketMap.put(sessionId, this);  log.info("用户连接: {} - {},当前在线人数为: {}", sessionId, session, webSocketMap.size());  this.sendMessage(session, "连接成功");  }  }  /* 连接关闭调用的方法 */    @OnClose  public void onClose(Session session) {  String sessionId = session.getId();  webSocketMap.remove(sessionId);  // 获取到信号量则需释放  SemaphoreUtils.release(socketSemaphore);  log.info("用户退出: {} - {},当前在线人数为: {}", sessionId, session, webSocketMap.size());  }  /* 收到客户端消息后调用的方法 */    @OnMessage  public void onMessage(String message, Session session) {  String sessionId = session.getId();  log.info("收到用户消息: {} - {},报文: {}", sessionId, session, message);  // 可以群发消息  // 消息保存到数据库、redis  if(StringUtils.isNotBlank(message)){  try {  // 解析发送的报文  JSONObject jsonObject = JSON.parseObject(message);  // 追加发送人(防止篡改)  jsonObject.put("fromSessionId", sessionId);  String toSessionId = jsonObject.getString("toSessionId");  // 传送给对应toUserId用户的websocket  if (StringUtils.isNotBlank(toSessionId) && webSocketMap.containsKey(toSessionId)) {  webSocketMap.get(toSessionId).getSession().getBasicRemote().sendText(message);  } else {  // 否则不在这个服务器上，发送到mysql或者redis  log.error("请求的sessionId:{} 不在该服务器上", toSessionId);  }  }catch (Exception e){  e.printStackTrace();  }  }  }  /* 连接报错时的处理方法 */    @OnError  public void onError(Session session, Throwable error) {  String sessionId = session.getId();  if (session.isOpen()) {  // 关闭连接  try {  session.close();  } catch (IOException e) {  throw new RuntimeException(e);  }  }  // 移出用户  webSocketMap.remove(sessionId);  // 获取到信号量则需释放  SemaphoreUtils.release(socketSemaphore);  log.error("用户错误: {} - {},原因:{}", sessionId, session, error.getMessage());  }  /* 实现服务器主动推送 */    public void sendMessage(Session session, String message) {  try {  session.getBasicRemote().sendText(message);  } catch (IOException e) {  log.error("推送报错：{}", e.toString());  }  }  /* 群发：发送自定义消息 */    public static void sendInfo(String message) {  // 发送到每一个已连接的session中  for (WebSocketServerService1 service : webSocketMap.values()) {  try {  Session session = service.getSession();  session.getBasicRemote().sendText(message);  log.info("发送消息报文至：{} - {}: {}", session.getId(), session, message);  } catch (IOException e) {  throw new RuntimeException(e);  }  }  }  
}

• 业务层和控制器

@Service  
public class HelloServiceImpl implements HelloService {  // 每3s推送至前端  @Scheduled(fixedRate = 3000)  @Override  public void printTimeToWeb() {  SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm:ss");  String date = dateFormat.format(new Date());  WebSocketServerService1.sendInfo(date);  }  
}

@RestController  
@RequestMapping("/api/hello")  
public class HelloController {  @Resource  public HelloService helloService;  @PostMapping("/pushToWeb")  public void pushToWeb(){  helloService.printTimeToWeb();  }  
}

3.2 前端

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>websocket通讯</title></head><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>let socket;function openSocket() {const socketUrl = "ws://localhost:8080/api/websocket/service1";console.log(socketUrl);if (socket != null) {socket.close(); socket = null;}socket = new WebSocket(socketUrl);//打开事件socket.onopen = function() {console.log("websocket已打开");};//获得消息事件socket.onmessage = function(msg) {console.log(msg.data);// 发现消息进入,开始处理前端触发逻辑};//关闭事件socket.onclose = function() {console.log("websocket已关闭");};//发生了错误事件socket.onerror = function() {console.log("websocket发生了错误");}}function closeSocket() {socket.close();}function sendMessage() {socket.send('{"toSessionId":"'+$("#toSessionId").val()+'","contentText":"'+$("#contentText").val()+'"}');}</script><body><p>【socket开启者的ID信息】:<div><input id="userId" name="userId" type="text" value="10"></div><p>【客户端向服务器发送的内容】:<div><input id="toSessionId" name="toSessionId" type="text" value="20"><input id="contentText" name="contentText" type="text" value="hello websocket"></div><p>【操作】：<div><a onclick="openSocket()">开启socket</a></div><p>【操作】：<div><a onclick="closeSocket()">关闭socket</a></div><p>【操作】：<div><a onclick="sendMessage()">发送消息</a></div></body>
</html>

测试

连接成功时：

 

 

数据推送：

关闭连接：