助你上天！手把手教你搭建实时聊天室，仅需Websocket

2023-11-22 22:05:49

构建一个实时聊天室：使用 WebSocket.io 畅聊无阻

在当今的社交媒体时代，聊天室已成为拉近人们距离、促进沟通的重要工具。如果你打算搭建一个在线聊天室，WebSocket 是一个绝佳的选择。WebSocket 是一种网络通信协议，可让浏览器与服务器建立持久的双向连接。借助 Websocket.io 这个 JavaScript 库，使用 WebSocket 变得知心应手。

服务端构建

首先，我们搭建服务端。我们可以使用 Node.js 和 Express.js 来完成：

const express = require('express');
const socketIO = require('socket.io');

const app = express();
app.use(express.static('public'));

const server = app.listen(3000);
const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('A new client has connected');

  socket.on('message', (message) => {
    console.log('Message received: ', message);
    io.emit('message', message);
  });
});

客户端构建

接下来，我们构建客户端。我们可以使用 HTML、CSS 和 JavaScript 来完成：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>聊天室</h1>
    <input type="text" id="message" />
    <button id="send">发送</button>
    <div id="messages"></div>
  </body>
  <script src="/socket.io.js"></script>
  <script>
    const socket = io();

    document.getElementById('send').addEventListener('click', () => {
      const message = document.getElementById('message').value;
      socket.emit('message', message);
    });

    socket.on('message', (message) => {
      const messages = document.getElementById('messages');
      messages.innerHTML += `<p>${message}</p>`;
    });
  </script>
</html>