websocket使用（前端、后端）

原创已于 2025-03-28 11:54:02 修改 · 703 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #前端 #网络协议

于 2025-03-21 17:58:28 首次发布

后端：参考后端老师整理的文档

springboot整合websocket_springboot websocket-优快云博客

前端：如下

创建WebSocket连接

在JavaScript中，可以使用WebSocket构造函数来创建WebSocket连接，指定WebSocket服务器的URL作为参数。例如：

const socket = new WebSocket("ws://example.com/socketserver");

监听WebSocket事件

WebSocket对象提供了几个事件监听器，可以用来处理连接的不同状态和消息的接收。

onopen：当WebSocket连接成功建立时触发。
onmessage：当接收到来自服务器的消息时触发。
onerror：当WebSocket连接出现错误时触发。
onclose：当WebSocket连接关闭时触发。例如：

socket.onopen = function(event) {
    // 在握手阶段添加Authorization头
    console.log("连接成功");
};

socket.onmessage = function(event) {
    // 处理接收到的消息
    console.log("获取服务器数据: " + event.data);
};

socket.onerror = function(event) {
    console.log("WebSocket连接出现错误: " + event.error);
};

socket.onclose = function(event) {
    console.log("连接关闭 " + event.code);
};

发送数据到服务器

在WebSocket连接建立后，可以使用WebSocket对象的send方法向服务器发送数据。例如：

socket.send("Hello server!");

关闭WebSocket连接

当不再需要WebSocket连接时，可以使用WebSocket对象的close方法关闭连接。例如：

socket.close();

跨域问题

如果WebSocket连接的URL和当前页面的URL不同，需要在服务器端进行相应的跨域设置。

数据格式

在发送和接收消息时，通常需要将数据转换为JSON字符串进行传输。例如：

var data = {
    msg_id: "1",
    msg_type: "test",
    content: {
        count: "10"
    }
};
var jsonString = JSON.stringify(data);
socket.send(jsonString);

在接收服务器返回的JSON数据时，可以使用JSON.parse方法将其解析为JavaScript对象。例如：

socket.onmessage = function(event) {
    var response = JSON.parse(event.data);
    console.log('Received message:', response);
};

注:如果网关不支持websocket,可以使用SSE(http的get请求)：

SSE单向消息推送(get请求)-优快云博客