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

技术教程
2025-10-21 14:43:01

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

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

建立 WebSocket 连接

在网页中通过 J*aScript 创建 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 发送到服务器。

Content at Scale

SEO长内容自动化创作平台

154 查看详情 Content at Scale

关键点：

获取输入框内容
调用 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>
  <input type="text" id="message-input" placeholder="输入消息..." />
  <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>