WebSocket通过HTTP升级握手建立TCP上的持久双向通信，客户端用new WebSocket()连接并监听onopen/onmessage，服务端用ws库广播消息，需处理重连、心跳、鉴权等优化。
用 JavaScript 实现实时聊天应用，核心在于建立客户端与服务端之间的持久、双向通信通道——WebSocket 正是为此而生。它不像 HTTP 那样每次请求都要重新握手，而是建立一次连接后，双方可以随时互相发消息，延迟低、开销小。
WebSocket 如何建立双向通信？
WebSocket 协议在 TCP 之上，通过一次 HTTP 升级（Upgrade）握手完成连接建立。成功后，连接保持打开状态，客户端和服务端都能主动发送数据（文本或二进制），无需轮询或长连接模拟。
关键点：
客户端用 new WebSocket(url) 发起连接，URL 以 ws://（开发）或 wss://（生产，加密）开头 连接建立后触发 onopen 事件；出错时触发 onerror；断开时触发 onclose 用 ws.send() 发送消息，用 ws.onmessage 接收服务端推送的消息 服务端需使用支持 WebSocket 的后端（如 Node.js 的 ws 库、Socket.IO、或 Express + ws 中间件）来监听并广播消息
前端：用原生 WebSocket 写一个聊天界面
HTML 中放一个输入框、一个发送按钮、一个消息列表容器：
立即学习“Java免费学习笔记（深入）”；
JavaScript 初始化连接并处理交互：
const ws = new WebSocket('ws://localhost:8080');ws.onopen = () => { console.log('已连接到聊天服务器');};ws.onmessage = (event) => { const msg = JSON.parse(event.data); const p = document.createElement('p'); p.textContent = `[${msg.user}]: ${msg.text}`; document.getElementById('chatBox').appendChild(p); document.getElementById('chatBox').scrollTop = document.getElementById('chatBox').scrollHeight;};ws.onerror = (err) => console.error('WebSocket 错误:', err);ws.onclose = () => console.log('连接已关闭');document.getElementById('sendBtn').onclick = () => { const input = document.getElementById('msgInput'); const text = input.value.trim(); if (text && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ user: '游客', text })); input.value = ''; }};
后端：用 Node.js + ws 库搭建简易服务端
安装依赖：npm install ws
创建 server.js：
const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });// 存储所有连接的客户端（简单场景可用数组，生产环境建议用 Map 或 Redis）const clients = new Set();wss.on('connection', (ws, req) => { console.log('新用户连接'); clients.add(ws); ws.on('message', (data) => { try { const msg = JSON.parse(data); // 广播给所有客户端（包括自己），也可排除发送者 clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(JSON.stringify({ user: msg.user || '匿名', text: msg.text || '' })); } }); } catch (e) { console.error('消息解析失败:', e); } }); ws.on('close', () => { console.log('用户断开'); clients.delete(ws); });});console.log('WebSocket 服务运行在 ws://localhost:8080');
运行：node server.js，前端即可连接。
注意事项和优化方向
原生 WebSocket 功能精简，实际项目中常需补充能力：
自动重连：网络抖动时手动监听 onclose 并延时重试 心跳保活：定时 send() ping 消息，防止代理/防火墙断连 消息格式约定：统一用 JSON，带 type 字段区分登录、消息、系统通知等 身份标识：连接时传 token 或在 upgrade 请求头中携带用户信息，服务端做鉴权 考虑 Socket.IO：它封装了 WebSocket，并降级支持长轮询，兼容性更好，API 更友好
基本上就这些。WebSocket 本身不复杂，但容易忽略错误处理、连接状态管理和消息可靠性。从原生入手理解原理，再过渡到成熟方案，是稳妥的路径。
以上就是如何用JavaScript实现一个实时聊天应用_WebSocket如何建立双向通信？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544313.html
微信扫一扫 
支付宝扫一扫 
