首页 > 文章 > 前端

HTML5WebSocket聊天室搭建教程

时间：2025-10-22 09:45:46 275浏览收藏

一分耕耘，一分收获！既然都打开这篇《HTML5 WebSocket聊天室实现教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

答案：使用HTML5和WebSocket可实现简易聊天室客户端，通过JavaScript创建WebSocket连接ws://localhost:8080，监听onopen、onmessage和onclose事件以处理连接状态与实时消息，结合输入框和发送按钮，用户输入内容后点击或按回车触发send()发送消息，并将服务器返回的消息动态添加到页面聊天框中，同时滚动到底部，确保良好交互体验。

html5使用web socket制作简单聊天室 html5使用实时通信的客户端代码

要使用 HTML5 和 WebSocket 制作一个简单的聊天室，客户端代码主要负责连接服务器、发送消息和接收实时消息。下面是一个简洁、实用的客户端实现示例。

建立 WebSocket 连接

在网页中通过 JavaScript 创建 WebSocket 实例，连接到后端 WebSocket 服务（例如运行在 ws://localhost:8080 的服务器）。

确保服务器已就绪，支持 WebSocket 协议。

创建 WebSocket 对象指向服务器地址
监听连接打开、消息接收、关闭等事件

示例代码：

<script>
// 替换为你的 WebSocket 服务器地址
const socket = new WebSocket("ws://localhost:8080");

// 连接成功时
socket.onopen = function(event) {
  console.log("已连接到聊天服务器");
};

// 接收来自服务器的消息
socket.onmessage = function(event) {
  const chatBox = document.getElementById("chat-box");
  const message = document.createElement("div");
  message.textContent = event.data;
  chatBox.appendChild(message);
};

// 处理连接关闭
socket.onclose = function(event) {
  console.log("连接已关闭");
};
</script>

发送消息到服务器

提供输入框和发送按钮，用户输入内容后点击发送，消息通过 WebSocket 发送到服务器。

关键点：

获取输入框内容
调用 socket.send() 发送文本
清空输入框

完整 HTML 与 JS 示例：

<!DOCTYPE html>
<html>
<head>
  <title>简易聊天室</title>
  <style>
    #chat-box {
      border: 1px solid #ccc;
      height: 300px;
      overflow-y: scroll;
      padding: 10px;
      margin-bottom: 10px;
    }
    #message-input {
      width: 70%;
      padding: 8px;
    }
    #send-btn {
      padding: 8px;
    }
  </style>
</head>
<body>
  <h2>聊天室</h2>
  <div id="chat-box"></div>
  &lt;input type=&quot;text&quot; id=&quot;message-input&quot; placeholder=&quot;输入消息...&quot; /&gt;
  <button id="send-btn">发送</button>

  <script>
    const socket = new WebSocket("ws://localhost:8080");
    const chatBox = document.getElementById("chat-box");
    const messageInput = document.getElementById("message-input");
    const sendButton = document.getElementById("send-btn");

    socket.onopen = function() {
      console.log("连接已建立");
    };

    socket.onmessage = function(event) {
      const message = document.createElement("div");
      message.textContent = event.data;
      chatBox.appendChild(message);
      chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
    };

    sendButton.onclick = function() {
      const msg = messageInput.value.trim();
      if (msg) {
        socket.send(msg);
        messageInput.value = ""; // 清空输入框
      }
    };

    // 支持回车发送
    messageInput.addEventListener("keypress", function(e) {
      if (e.key === "Enter") {
        sendButton.click();
      }
    });

    socket.onclose = function() {
      console.log("连接已断开");
    };
  </script>
</body>
</html>

注意事项

实际使用中需要注意以下几点：

确保后端有 WebSocket 服务监听指定端口
处理连接失败或网络中断的情况（可监听 onerror）
生产环境建议使用 wss:// 加密连接
对用户输入做基本过滤，防止 XSS（如转义 HTML 字符）

基本上就这些。客户端代码简单清晰，配合 Node.js、Python 或 Java 的 WebSocket 服务端即可运行完整聊天室。

理论要掌握，实操不能落！以上关于《HTML5WebSocket聊天室搭建教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

HTML5 客户端实时通信 websocket 聊天室