HTML5代码如何实现实时通信 HTML5代码中WebSocket的搭建教程

爱谁谁 2025-10-22 00:00:00 次阅读

HTML5本身不直接提供实时通信功能，但通过集成WebSocket API，可以在浏览器和服务器之间建立全双工通信通道，实现真正的实时数据交互。下面是一个基于HTML5和WebSocket的实时通信搭建教程，包含前端代码和后端Node.js示例。

什么是WebSocket？

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。与传统的HTTP请求不同，WebSocket连接一旦建立，客户端和服务器可以随时互相发送数据，适合聊天应用、实时通知、在线游戏等场景。

前端：HTML5 + JavaScript 搭建WebSocket客户端

使用原生JavaScript即可在HTML页面中连接WebSocket服务：




  
  WebSocket 实时通信


  WebSocket 客户端

后端：Node.js + ws 搭建WebSocket服务器

使用Node.js和ws库快速搭建WebSocket服务器。

步骤一：初始化项目并安装依赖

npm init -y
npm install ws

步骤二：创建 server.js 文件

const WebSocket = require('ws');

// 创建WebSocket服务器，监听8080端口
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('? 客户端已连接');

  // 接收客户端消息
  ws.on('message', function(data) {
    console.log('? 收到消息:', data.toString());

    // 广播给所有连接的客户端（包括发送者）
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`广播: ${data}`);
      }
    });
  });

  // 向客户端发送欢迎消息
  ws.send('? 欢迎！你已连接到WebSocket服务器。');
});

步骤三：启动服务器