WebSocket协议实现全双工通信，适用于实时聊天等场景；通过JavaScript的WebSocket API建立连接并监听事件，结合Node.js的ws库实现消息广播与客户端交互，需处理断开重连以保证稳定性。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，特别适合需要实时交互的应用场景。相比传统的 HTTP 请求-响应模式，WebSocket 能让服务器主动向客户端推送数据，极大提升了通信效率和响应速度。JavaScript 结合 WebSocket 可以轻松构建聊天室、实时通知、在线协作等应用。
WebSocket 基本用法
在浏览器中，JavaScript 提供了原生的 WebSocket API，使用起来非常简单。
创建连接：
通过 new WebSocket(url) 实例化一个连接，URL 使用 ws:// 或 wss://（加密）协议。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const socket = new WebSocket(‘ws://localhost:8080’);
socket.addEventListener(‘open’, (event) => {
console.log(‘连接已建立’);
socket.send(‘你好，服务器！’);
});
socket.addEventListener(‘message’, (event) => {
console.log(‘收到消息:’, event.data);
});
socket.addEventListener(‘close’, (event) => {
console.log(‘连接已关闭’);
});
socket.addEventListener(‘error’, (event) => {
console.error(‘发生错误’, event);
});
实现简单的实时聊天功能
一个典型的 WebSocket 应用是多人聊天室。前端发送消息，服务器广播给所有连接的客户端。
前端发送与接收消息：
用户输入内容后，通过 socket.send() 发送到服务端。
document.getElementById(‘sendBtn’).addEventListener(‘click’, () => {
const input = document.getElementById(‘messageInput’);
const msg = input.value;
if (msg.trim()) {
socket.send(msg);
input.value = ”;
}
});
监听 message 事件将收到的消息显示在页面上：
socket.addEventListener(‘message’, (event) => {
const chatBox = document.getElementById(‘chatBox’);
const messageElement = document.createElement(‘div’);
messageElement.textContent = event.data;
chatBox.appendChild(messageElement);
});
服务端配合（Node.js + ws 示例）
前端需要一个支持 WebSocket 的服务端。Node.js 中可以使用 ws 库快速搭建。
安装： npm install ws
服务端代码：
const WebSocket = require(‘ws’);
const wss = new WebSocket.Server({ port: 8080 });
wss.on(‘connection’, (ws) => {
console.log(‘新客户端连接’);
ws.on(‘message’, (data) => {
console.log(‘收到:’, data.toString());
// 广播给所有客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data.toString());
}
});
});
ws.send(‘欢迎加入聊天室！’);
});
处理连接状态与重连机制
网络不稳定时，WebSocket 可能断开。建议实现自动重连逻辑。
检测断开并重试：
function connect() {
const socket = new WebSocket(‘ws://localhost:8080’);
socket.addEventListener(‘close’, () => {
console.log(‘连接断开，5秒后重连…’);
setTimeout(connect, 5000);
});
socket.addEventListener(‘error’, () => {
socket.close();
});
// 其他监听逻辑… }
调用 connect() 启动连接，断开后会尝试重新建立。
基本上就这些。WebSocket 让实时交互变得直接高效，结合现代前端框架（如 React、Vue），可以快速开发出体验流畅的实时应用。关键是处理好连接状态、消息格式和异常情况，保证稳定性。不复杂但容易忽略细节。
以上就是JavaScript WebSocket实时应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531504.html
微信扫一扫 
支付宝扫一扫 
