首页 > 文章 > 前端

HTML5WebSocket搭建教程详解

时间：2025-10-21 19:06:54 407浏览收藏

想要构建实时通信应用吗？本文为你提供详细的HTML5 WebSocket搭建教程，让你轻松掌握前端与后端的技术要点。HTML5本身不直接提供实时通信，但通过WebSocket API，可以在浏览器和服务器之间建立全双工通信，实现真正的数据实时交互。本教程将通过前端HTML5+JavaScript和后端Node.js示例，一步步教你如何使用WebSocket。内容包括WebSocket客户端的搭建、Node.js服务器的创建与配置，以及测试与注意事项，助你快速上手WebSocket，构建高性能的实时应用，例如聊天应用、在线游戏等。立即学习，开启你的实时通信之旅！

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

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

什么是WebSocket？

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

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>WebSocket 实时通信</title>
</head>
<body>
  <h2>WebSocket 客户端</h2>
  &lt;textarea id=&quot;output&quot; rows=&quot;10&quot; cols=&quot;50&quot; readonly&gt;&lt;/textarea&gt;<br/>
  &lt;input type=&quot;text&quot; id=&quot;message&quot; placeholder=&quot;输入消息&quot; /&gt;
  <button onclick="sendMessage()">发送</button>
  <button onclick="closeConnection()">关闭连接</button>

  <script>
    // 创建WebSocket连接（注意地址为ws或wss）
    const socket = new WebSocket("ws://localhost:8080");

    // 连接成功
    socket.onopen = function(event) {
      appendMessage("✅ 连接已建立");
    };

    // 接收服务器消息
    socket.onmessage = function(event) {
      appendMessage("? 来自服务器: " + event.data);
    };

    // 处理错误
    socket.onerror = function(event) {
      appendMessage("❌ 连接出错");
    };

    // 连接关闭
    socket.onclose = function(event) {
      appendMessage("? 连接已关闭");
    };

    // 发送消息
    function sendMessage() {
      const input = document.getElementById("message");
      const msg = input.value;
      if (msg) {
        socket.send(msg);
        appendMessage("? 我: " + msg);
        input.value = "";
      }
    }

    // 关闭连接
    function closeConnection() {
      socket.close();
    }

    // 显示消息到文本框
    function appendMessage(message) {
      const output = document.getElementById("output");
      output.value += message + "\n";
      output.scrollTop = output.scrollHeight; // 自动滚动到底部
    }
  </script>
</body>
</html>

后端：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服务器。');
});

步骤三：启动服务器

node server.js

服务器运行后，监听 ws://localhost:8080，等待客户端连接。

测试与注意事项

确保前后端在同一域名或允许跨域（生产环境需配置CORS）
使用 ws:// 表示非加密连接，wss:// 用于加密（类似HTTPS）
浏览器需支持WebSocket（现代浏览器均支持）
服务器部署时建议配合Nginx反向代理，并启用WSS
处理连接断开、重连逻辑可提升用户体验

基本上就这些。用HTML5的WebSocket API加上一个简单的后端服务，就能实现高效的实时通信。不复杂但容易忽略心跳机制和异常处理，在实际项目中要补全。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

HTML5 Node.js 实时通信 websocket 全双工通信