websoket 学习笔记

目录

基本概念

工作原理

优势

应用场景

HTTP协议与 webSoket协议之间的对比

消息推送场景

1. 轮询（Polling）

2. 长轮询（Long Polling）

3. 服务器发送事件（Server-Sent Events, SSE）

4. WebSocket

服务端WebSoket

基本介绍

引入依赖

核心API示例

聊天消息demo流程分析

配置类

webSocketConfig(注入ServerEndpoint注解)

GetHttpSessionConfig（存储Session会话对象）

服务类

Server端Socket

客户端

---

WebSocket 是一种基于 TCP 的网络通信协议，允许在客户端和服务器之间建立持久的双向通信连接。

基本概念

• 全双工通信(Full Duplex)：WebSocket 支持客户端和服务器在同一连接上同时发送和接收数据，允许数据在两个方向上同时传输。

• 半双工(Half Duplex)：允许数据在两个方向上传输，但是同一个时间段内只允许一个方向上传输。

• 持久连接：通过一次握手建立连接后，连接会一直保持，无需每次通信都重新建立

• 低延迟与高效性：减少了传统 HTTP 请求-响应模式中的频繁连接开销，数据传输更高效

工作原理

1. 握手阶段：客户端通过 HTTP 请求向服务器发起 WebSocket 升级请求，服务器响应后将连接升级为 WebSocket

• 数据传输：连接建立后，数据以帧的形式在客户端和服务器之间传输

• 关闭连接：当一方关闭连接时，WebSocket 会发送关闭帧，通知对方关闭连接

优势

• 实时性：适合需要快速响应和更新的场景

• 节省资源：减少了不必要的网络请求和响应，降低了带宽和服务器资源消耗

• 跨平台支持：主流浏览器和服务器端语言均支持 WebSocket

应用场景

• 实时通信：如在线聊天、实时游戏

• 数据推送：服务器主动向客户端推送数据，如股票行情、天气预报

• 实时监控：如视频监控、设备状态监控

        WebSocket 是现代 Web 开发中实现高效实时通信的重要技术，广泛应用于各种需要快速数据交互的场景。

HTTP协议与 webSoket协议之间的对比

        用到最多的其中一个场景就是 消息推送。

消息推送场景

消息推送是指服务器主动向客户端发送信息的技术。以下是几种常见的消息推送方式：

1. 轮询（Polling）

• 原理：客户端每隔固定时间向服务器发送请求，查询是否有新消息。

• 优点：

  • 实现简单，兼容性好，不需要额外的服务器支持。

• 缺点：

  • 频繁请求会增加服务器负担，浪费带宽。

  • 实时性较差，消息延迟取决于轮询间隔。

• 适用场景：对实时性要求不高的场景，如邮件通知。

2. 长轮询（Long Polling）

• 原理：客户端向服务器发送请求，服务器保持连接打开，直到有新消息才返回响应。

• 优点：

  • 减少了无效请求，相比普通轮询更节省资源。

  • 实时性更好。

• 缺点：

  • 服务器需要保持大量连接，对服务器资源要求较高。

  • 如果消息间隔过长，可能导致连接超时。

• 适用场景：对实时性有一定要求但不希望使用复杂技术的场景。

3. 服务器发送事件（Server-Sent Events, SSE）

原理：

• 服务器通过 HTTP 连接向客户端推送数据，客户端通过 EventSource 接收消息。

• SSE在服务器和客户端之间打开一个单向通道

• 服务端响应的不再是一次性的数据包，而是text/event-stream类型的数据流信息

• 服务器有数据变更时将数据流式传输到客户端

优点：

• 实现简单，基于 HTTP，兼容性较好。

• 只支持单向通信（服务器到客户端），适合通知类应用。

缺点：

• 不支持双向通信。

• 不支持跨域，需要服务器和客户端在同一个域下。

适用场景：股票行情、新闻推送等单向通知场景。

4. WebSocket

• 原理：通过一次握手建立持久的双向通信连接，客户端和服务器可以随时发送和接收消息。

• 优点：

  • 全双工通信，实时性高。

  • 数据传输效率高，减少了 HTTP 请求的开销。

• 缺点：

  • 实现复杂，需要服务器和客户端都支持 WebSocket 协议。

  • 需要额外处理连接的建立和关闭。

• 适用场景：在线聊天、实时游戏、实时协作工具等。

不同消息推送方式各有优缺点，选择时需要根据具体需求和场景进行权衡。例如：

• 如果对实时性要求不高，可以选择轮询或长轮询。

• 如果需要高效实时的双向通信，WebSocket 是更好的选择。

服务端WebSoket

基本介绍

引入依赖

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

核心API示例

聊天消息demo流程分析

配置类

webSocketConfig(注入ServerEndpoint注解)

package com.angindem.server.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {@Bean
//    注入ServerEndpointExporter，自动注册使用@ServerEndpoint注解的public ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

GetHttpSessionConfig（存储Session会话对象）

package com.angindem.server.config;import com.angindem.common.utils.CommonUtils;
import com.angindem.common.utils.IpUtils;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import jakarta.websocket.HandshakeResponse;
import jakarta.websocket.server.HandshakeRequest;
import jakarta.websocket.server.ServerEndpointConfig;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {@Overridepublic void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {
//         获取 HttpSession 对象HttpSession httpSession = (HttpSession) request.getHttpSession();// 获取当前请求的HttpServletRequestServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();HttpServletRequest req = attributes.getRequest();if (httpSession == null) httpSession = req.getSession();String ip = IpUtils.getIpAddress(req);httpSession.setAttribute("user", CommonUtils.getRandomString(8));//        将 HttpSession 对象存储到 ServerEndpointConfig 中sec.getUserProperties().put(HttpSession.class.getName(), httpSession);// 将HttpServletRequest存储到EndpointConfig的用户属性中sec.getUserProperties().put(String.class.getName(), ip);}
}

服务类

Server端Socket

package com.angindem.server.wx;
import com.alibaba.fastjson2.JSON;
import com.angindem.common.utils.MessageUtils;
import com.angindem.server.config.GetHttpSessionConfig;
import com.angindem.server.wx.pojo.Message;
import jakarta.servlet.http.HttpSession;
import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Slf4j
@Component
@ServerEndpoint(value = "/chat", configurator = GetHttpSessionConfig.class)
public class ChatEndPoint {//    ConcurrentHashMap 高并发的多线程访问的哈希Mappublic static final Map<String, Session> onlineUsers = new ConcurrentHashMap<>();private HttpSession httpSession;@OnOpenpublic void onOpen(Session session, EndpointConfig config) {log.info("连接建立成功");
//        1、将 Session 放入到集合中，方便后续使用this.httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());String  reqIp = (String) config.getUserProperties().get(String.class.getName());String user =  MessageUtils.getNowSessionUserName(this.httpSession);onlineUsers.put(user, session);
//        2、广播消息。需要将登录的所有用户推送给所有用户log.info("当前在线人数：{}", onlineUsers.size());log.info("当前用户：{}，来自：{}", user, reqIp);String message = MessageUtils.getDataMessage("system", user, MessageUtils.getFrinds());MessageUtils.broadcastAllUsers(message);}@OnMessagepublic void onMessage(String message) {log.info("收到消息：{}", message);Message msg = JSON.parseObject(message, Message.class);// 获取 消息接收方的用户名String toName = msg.getToName();String mess = msg.getMessage();String user =  MessageUtils.getNowSessionUserName(this.httpSession);String sendMessage = MessageUtils.getMessage("user", user, mess);// 获取消息接收方用户对象的 session 对象
//            Session session = onlineUsers.get(toName);
//            session.getBasicRemote().sendText(sendMessage);MessageUtils.broadcastAllUsers(sendMessage);}@OnClosepublic void onClose(Session session) {log.info("连接关闭");
//        1、从 onlineUsers 中剔除当前的 session 对象String user =  MessageUtils.getNowSessionUserName(this.httpSession);onlineUsers.remove(user);
//        2、通知其它所有的用户，当前用户已经下线log.info("当前在线人数：{}", onlineUsers.size());String message = MessageUtils.getDataMessage("system", user, MessageUtils.getFrinds());MessageUtils.broadcastAllUsers(message);}
}

客户端

（VueUse的  webSocket 客户端）

/*** status 是连接的状态值* data 是 socket 推送过来的消息* send 是一个方法， 用来发送消息给后台* close 是一个方法，关闭 socket 连接* open 如果当前的websocket是活跃的，将会关闭它重新打开一个新的*/
const { status, data, close, open, send } = useWebSocket(`ws://localhost:9898/chat`, {onConnected: function (ws) {console.log('websocket 连接成功！', ws)},onDisconnected: function (ws, event) {console.log('onDisconnected')},onError: function (ws, event) {console.log('onError', event)},onMessage: function (ws, event) {console.log('event.data', event.data)if (event.data) {// messageInfo.value = []const info = JSON.parse(event.data)console.log(info) // 这里就是websocket每次发送的消息if (info.data) updateUsers(info.data);if (info.message) messageInfo.value.push(info)}},heartbeat: false,autoClose: false, // 自动关闭连接});

扩展：

同时可以通过 vue 中的 watch 监听发送过来的数据

import {  watch } from 'vue';
//获取数据时必须要监视，此处的data就是上面结构出的data
watch(data, () => {//获取到的数据为data.valueconsole.log(data.value)
})

发送消息到服务端

//需要发送给服务器的数据
const info = "你好吗?"//send方法，此处的send为上面解构出的send
send(info)