浅谈NodeJS实现聊天室应用的流程与细节

2023-09-17 11:32:55

在本文中，我们将重点探讨如何使用NodeJS和Socket.IO构建一个聊天室应用。

首先，我们需要安装NodeJS和Socket.IO。

npm install -g nodejs
npm install socket.io

接下来，我们需要创建一个新的NodeJS项目。

mkdir chat-app
cd chat-app
npm init -y

在项目中，我们需要创建一个新的文件server.js。

// 导入必要的模块
const express = require('express');
const socketIO = require('socket.io');

// 创建一个Express应用
const app = express();

// 设置静态文件目录
app.use(express.static('public'));

// 创建一个HTTP服务器
const server = app.listen(3000, () => {
  console.log('服务器已启动，端口号为3000');
});

// 创建一个Socket.IO实例
const io = socketIO(server);

// 监听客户端连接事件
io.on('connection', (socket) => {
  console.log('客户端已连接');

  // 监听客户端发送的消息事件
  socket.on('message', (message) => {
    // 将消息发送给所有客户端
    io.emit('message', message);
  });

  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('客户端已断开连接');
  });
});

在public目录中，我们需要创建一个新的文件index.html。

<!DOCTYPE html>
<html>
  <head>
    
    <script src="/socket.io/socket.io.js"></script>
    <script>
      // 创建一个Socket.IO实例
      const socket = io();

      // 监听服务器发送的消息事件
      socket.on('message', (message) => {
        // 将消息显示在页面上
        const li = document.createElement('li');
        li.textContent = message;
        document.getElementById('messages').appendChild(li);
      });

      // 发送消息
      const form = document.getElementById('form');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const message = document.getElementById('message').value;
        socket.emit('message', message);
        document.getElementById('message').value = '';
      });
    </script>
  </head>
  <body>
    <h1>聊天室</h1>
    <ul id="messages"></ul>
    <form id="form">
      <input type="text" id="message" placeholder="输入消息">
      <button type="submit">发送</button>
    </form>
  </body>
</html>