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

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> 

 socket.close(); 

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

基本上就这些。WebSocket 让前端能与后端保持长连接，实现低延迟通信，掌握它的基本用法对开发实时功能非常有帮助。