JavaScript WebSocket实时通信-js教程-PHP中文网

JavaScript WebSocket实时通信

夢幻星辰

发布： 2025-11-04 19:28:02

原创

598人浏览过

WebSocket 可实现浏览器与服务器全双工通信，通过 new WebSocket('ws://...') 建立连接，onopen 触发后可用 send() 发送数据、onmessage 接收消息，支持 JSON 格式，close() 关闭连接并由 onclose 处理关闭事件，readyState 表示连接状态，生产环境推荐使用 wss、添加重连机制、控制消息频率、验证数据并及时清理连接。

javascript websocket实时通信

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，相比传统的 HTTP 轮询，它能实现真正的实时数据交互。在 JavaScript 中使用 WebSocket 可以轻松构建聊天应用、实时通知、在线协作工具等需要即时通信的功能。

创建 WebSocket 连接

要建立 WebSocket 连接，只需实例化一个 WebSocket 对象，并传入服务器的 ws 或 wss（加密）地址：

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
  console.log('连接已建立');
};

socket.onerror = function(error) {
  console.error('连接出错:', error);
};

登录后复制

连接成功后会触发 onopen 事件，之后就可以收发数据了。

发送与接收消息

通过 send() 方法向服务器发送数据，通常为字符串或 JSON 格式：

立即学习“Java免费学习笔记（深入）”；

socket.send(JSON.stringify({
  type: 'message',
  content: '你好，服务器！'
}));

登录后复制

使用 onmessage 监听来自服务器的消息：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('收到消息:', data);
};
</font>

登录后复制

event.data 是服务器发送的内容，可以是字符串、Blob 或 ArrayBuffer，常见的是字符串形式的 JSON 数据。

关闭连接与状态管理

可调用 close() 主动关闭连接：

socket.close();

登录后复制

通过 onclose 处理连接关闭事件：

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`连接关闭，代码=${event.code} 原因=${event.reason}`);
  } else {
    console.warn('连接意外断开');
  }
};
</font>

登录后复制

可通过 socket.readyState 检查当前连接状态：