websocket是一种 html 5 全双工通信协议，可实现客户端与服务器间的实时数据交互。通过 new WebSocket(‘ws://…’) 创建连接，使用 onopen、onmessage、onerror、onclose 监听状态 事件 ，调用 send() 发送数据，服务端可用 node.js 的 ws 库实现消息广播，配合心跳与重连机制适用于聊天、通知等场景。
WebSocket 是 html5 提供的一种全双工通信协议，能让客户端和服务器之间实现低延迟、高效率的实时数据交互。相比传统的轮询或长轮询方式，WebSocket 能真正实现“服务端推”功能。
1. 创建 WebSocket 连接
在 浏览器 中使用 javaScript 可以轻松创建一个 WebSocket 实例，连接到指定的服务器地址。
const socket = new WebSocket('ws://localhost:8080');
注意：协议是 ws://（非加密）或 wss://（加密，类似 httpS），不能使用 http 或 https 协议。
2. 监听连接状态与事件
WebSocket 提供了多个事件回调来处理连接状态和数据通信：
立即学习 “ 前端免费学习笔记（深入）”；
- onopen：连接建立时触发
- onmessage：收到服务器消息时触发
- onerror：通信发生错误时触发
- onclose：连接关闭时触发
示例代码：
socket.onopen = function(Event) {console.log('连接已建立'); socket.send('你好，服务器！'); }; socket.onmessage = function(event) {console.log('收到消息：' + event.data); }; socket.onerror = function(error) {console.error('通信错误：', error); }; socket.onclose = function(event) {console.log('连接已关闭'); };
3. 发送与接收数据
使用 send() 方法向服务器发送数据，支持 字符串、Blob 或 ArrayBuffer。
// 发送文本 socket.send('这是一条消息'); // 发送 json 数据 const data = {type: 'chat', content: 'Hello World'}; socket.send(JSON.stringify(data));
服务器返回的数据通过 event.data 获取，可根据内容类型进行解析。
4. 服务端简单示例（Node.js + ws 库）
前端 需要配合支持 WebSocket 的服务端。以下是使用 node.js 和 ws 模块的简单服务端实现：
const WebSocket = require('ws'); const server = new WebSocket.Server({port: 8080}); server.on('connection', function(socket) {console.log('客户端已连接'); socket.on('message', function(data) {console.log('收到数据：' + data); // 将收到的消息广播给所有客户端 server.clients.forEach(function(client) {if (client.readyState === WebSocket.OPEN) {client.send('广播：' + data); } }); }); socket.send('欢迎接入 WebSocket 服务！'); });
安装依赖：
运行后，前端 页面即可通过 ws://localhost:8080 建立连接并实现实时通信。
基本上就这些。只要前后端都支持 WebSocket，就能轻松实现聊天、通知、实时数据展示等功能。关键在于连接管理、心跳机制和异常重连，实际项目中建议 封装 成独立模块使用。
