在web开发中,实时通信指的是客户端和服务器之间能够持续、低延迟地交换数据。javascript通过浏览器内置的WebSocket对象,可以建立一条持久化的双向通道,替代频繁轮询带来的资源浪费。下面先了解它的基本用法。

什么是WebSocket
WebSocket是一种基于TCP的通信协议,握手后客户端与服务端保持长连接,双方随时收发数据。在javascript中,使用WebSocket构造函数即可创建连接。
建立连接与收发消息
以下代码展示了如何用javascript连接WebSocket服务,并发送与接收文本消息:
// 创建WebSocket连接,地址换成你自己的服务
var ws = new WebSocket('ws://127.0.0.1:8080/ws');
// 连接成功时触发
ws.onopen = function() {
console.log('连接已建立');
// 向服务端发送消息
ws.send('hello server');
};
// 收到服务端消息时触发
ws.onmessage = function(event) {
console.log('收到消息:', event.data);
};
// 连接出错
ws.onerror = function(err) {
console.error('连接出错', err);
};
// 连接关闭
ws.onclose = function() {
console.log('连接已关闭');
};
发送不同格式的数据
除了字符串,还可以发送二进制数据。通过binaryType设置,能处理Blob或ArrayBuffer:
ws.binaryType = 'arraybuffer'; // 发送ArrayBuffer var buffer = new ArrayBuffer(4); var view = new Uint8Array(buffer); view[0] = 1; ws.send(buffer);
关闭连接
不再需要通信时,应主动关闭以释放资源:
// 1000表示正常关闭 ws.close(1000, 'client close');
注意事项
- WebSocket地址以ws或wss开头,wss为加密连接。
- 连接可能因网络中断断开,可结合重连机制提升稳定性。
- 服务端需支持WebSocket协议才能完成握手。
简单服务端示例
使用node.js的ws库可快速搭建测试服务:
// 需要先安装 ws 库:npm install ws
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function(client) {
console.log('客户端连入');
client.on('message', function(msg) {
console.log('收到:', msg);
client.send('echo: ' + msg);
});
});
通过上述方法,javascript就能利用WebSocket实现高效的实时通信,适用于聊天、推送和协同编辑等场景。
javascriptWebSocket实时通信修改时间:2026-07-26 00:09:16