当前位置：首页 > JavaScript

js 实现websocket

2026-03-02 06:01:30JavaScript

使用原生 JavaScript 实现 WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，适用于实时应用如聊天、游戏等。以下是实现步骤：

1. 创建 WebSocket 连接

通过 WebSocket 构造函数创建连接，参数为 WebSocket 服务器地址：

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

2. 监听连接事件

WebSocket 提供以下事件监听：

onopen：连接建立时触发
onmessage：接收到消息时触发
onerror：发生错误时触发
onclose：连接关闭时触发

socket.onopen = function(event) {
    console.log('Connection established');
};

socket.onmessage = function(event) {
    console.log('Message received:', event.data);
};

socket.onerror = function(error) {
    console.error('Error occurred:', error);
};

socket.onclose = function(event) {
    console.log('Connection closed');
};

3. 发送数据

使用 send() 方法发送数据，支持字符串、ArrayBuffer 或 Blob 格式：

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

4. 关闭连接

调用 close() 方法关闭连接：

socket.close();

完整示例代码

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

socket.onopen = function() {
    console.log('Connected to server');
    socket.send('Hello, server!');
};

socket.onmessage = function(event) {
    console.log('Server says:', event.data);
};

socket.onerror = function(error) {
    console.error('WebSocket error:', error);
};

socket.onclose = function() {
    console.log('Disconnected from server');
};

// 关闭连接示例
setTimeout(() => {
    socket.close();
}, 5000);

注意事项

协议需使用 ws://（非加密）或 wss://（加密）。
发送数据前需确保连接已建立（readyState === WebSocket.OPEN）。
跨域问题需服务器配置 Access-Control-Allow-Origin。
心跳机制可避免连接超时断开。

进阶功能

1. 二进制数据传输

发送 ArrayBuffer 或 Blob：

const buffer = new ArrayBuffer(8);
socket.send(buffer);

2. 自定义协议

通过子协议扩展功能：

const socket = new WebSocket('ws://example.com/socket', ['custom-protocol']);

3. 重连机制

在 onclose 中实现自动重连：

js 实现websocket

function connect() {
    const socket = new WebSocket('ws://example.com/socket');
    socket.onclose = function() {
        setTimeout(connect, 1000); // 1秒后重连
    };
}
connect();

通过以上方法，可以快速实现 WebSocket 通信并处理常见场景。