极速搭建在线聊天室，WebSocke不可或缺！

前端

2023-12-15 22:49:23

利用 WebSocket 技术打造实时在线聊天室：分步指南

摘要

在线聊天已成为我们日常交流中不可或缺的一部分。然而，寻找一个简单、高效且跨平台的聊天工具却并非易事。本教程将介绍如何使用 WebSocket 技术构建一个基本的在线聊天室，它能够在浏览器和服务器之间建立实时的双向通信。

WebSocket 简介

WebSocket 是一种协议，允许在浏览器和服务器之间建立持久连接，实现双向实时消息传递。与传统的 HTTP 协议相比，WebSocket 具有以下优势：

双向通信： 客户端和服务器可以同时发送和接收消息。
实时性： 消息可以立即传递，无需等待服务器的响应。
高效性： WebSocket 协议经过优化，即使在低带宽情况下也能高效工作。
跨平台： 支持所有支持 HTML5 的浏览器。

搭建在线聊天室：分步指南

步骤 1：创建 Node.js 服务端

安装 Node.js 和 npm 后，创建一个新的项目目录并安装必要的依赖项：

mkdir chat-server
cd chat-server
npm init -y
npm install ws

接下来，创建一个简单的服务端程序 server.js：

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log('Message received: %s', message);

    wss.clients.forEach((client) => {
      if (client !== ws) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

步骤 2：创建 HTML 客户端

在另一个目录中，创建 HTML 客户端 client.html：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="chat-container"></div>
  <input type="text" id="chat-input">
  <button type="button" id="chat-send">发送</button>

  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
      console.log('Connected to server');
    };

    ws.onmessage = (e) => {
      const chatContainer = document.getElementById('chat-container');
      chatContainer.innerHTML += `<p>${e.data}</p>`;
    };

    ws.onclose = () => {
      console.log('Disconnected from server');
    };

    document.getElementById('chat-send').onclick = () => {
      const chatInput = document.getElementById('chat-input');
      ws.send(chatInput.value);
      chatInput.value = '';
    };
  </script>
</body>
</html>