HTML5WebSocket：实现实时通信的代码编写教程

答案：使用WebSocket可实现网页实时通信。首先用Node.js和ws库搭建服务端，监听8080端口；然后在前端通过WebSocket API连接服务器，绑定onopen、onmessage、onclose和onerror事件；接着处理异常与关闭情况，提升稳定性；最后通过JSON格式传递带用户信息的消息，实现结构化通信。

如果您尝试在网页应用中实现实时通信功能，但服务器与客户端之间无法持续交换数据，则可能是由于缺乏双向通信机制。WebSocket 是 HTML5 提供的一种协议，能够在单个 TCP 连接上实现全双工通信。以下是使用 HTML5 WebSocket 实现实时通信的代码编写步骤：

一、搭建 WebSocket 服务端

WebSocket 的通信需要一个支持该协议的服务端程序来监听连接请求并处理消息收发。可以使用 Node.js 配合 ws 库快速构建服务端逻辑。

1、初始化 Node.js 项目，在终端执行 npm init -y 创建 package.json 文件。

2、安装 ws 模块，运行命令 npm install ws。

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

3、创建 server.js 文件，并写入以下代码：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('客户端已连接');
  ws.on('message', (data) => {
    console.log(`收到消息: ${data}`);
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

console.log('WebSocket 服务器正在运行在 ws://localhost:8080');

4、启动服务端，在终端运行 node server.js，确保端口 8080 未被占用。

二、编写前端 WebSocket 客户端代码

前端通过浏览器内置的 WebSocket API 与服务端建立连接，并绑定事件处理函数以响应消息接收和发送操作。

1、创建 index.html 文件，并在 body 中添加基本结构：

<input type="text" id="messageInput" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
<div id="chatBox"></div>

2、在 script 标签中添加如下 JavaScript 代码：

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

socket.onopen = () => {
  console.log('已连接到 WebSocket 服务器');
};

socket.onmessage = (event) => {
  const chatBox = document.getElementById('chatBox');
  const message = document.createElement('p');
  message.textContent = event.data;
  chatBox.appendChild(message);
};

function sendMessage() {
  const input = document.getElementById('messageInput');
  if (input.value) {
    socket.send(input.value);
    input.value = '';
  }
}

3、确保 HTML 文件正确引入脚本，并在浏览器中打开该页面进行测试。

CodeGeeX

智谱AI发布的AI编程辅助工具插件，可以实现自动代码生成、代码翻译、自动编写注释以及智能问答等功能

68

查看详情

三、处理连接异常与关闭事件

为了提高稳定性，需对网络中断或服务端异常关闭等情况进行监听和响应，避免客户端无反应或报错。

1、在客户端代码中添加 onclose 事件监听：

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

2、添加 onerror 事件处理函数：

socket.onerror = (error) => {
  console.error('WebSocket 错误:', error);
};

3、可在界面上提示用户“连接已断开”，并提供重连按钮触发 new WebSocket() 重建连接。

四、实现消息格式化与身份标识

实际应用中通常需要区分不同用户发送的消息，可通过封装 JSON 数据格式传递用户名和内容。

1、修改客户端发送逻辑，将消息包装为对象：

function sendMessage() {
  const input = document.getElementById('messageInput');
  if (input.value) {
    const msg = {
      user: '用户1',
      content: input.value,
      time: new Date().toLocaleTimeString()
    };
    socket.send(JSON.stringify(msg));
    input.value = '';
  }
}

2、在 onmessage 回调中解析 JSON 并显示结构化信息：

socket.onmessage = (event) => {
  const chatBox = document.getElementById('chatBox');
  const data = JSON.parse(event.data);
  const message = document.createElement('p');
  message.textContent = `[${data.time}] ${data.user}: ${data.content}`;
  chatBox.appendChild(message);
};

3、服务端也应保持对 JSON 字符串的转发能力，无需解码具体字段。

以上就是HTML5WebSocket：实现实时通信的代码编写教程的详细内容，更多请关注php中文网其它相关文章！