node.js中多人聊天室代码详解以及怎样跳转

以下是一个使用Node.js实现的多人聊天室的代码，以及使用Express框架实现跳转到聊天室页面的方法。

服务器端代码：

1. 导入模块和创建服务器

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

首先导入了`express`、`http`和`socket.io`模块，然后创建了一个`express`应用程序对象`app`和一个`http`服务器对象`http`。使用`socket.io`模块将`http`服务器对象包装成一个`WebSocket`服务器，并将其传递给`io`对象。

2. 处理客户端连接请求和消息发送

const users = [];

io.on('connection', (socket) => {
  console.log('a user connected');

  // 处理客户端连接请求
  socket.on('login', (username) => {
    users.push({id: socket.id, username});
    io.emit('userList', users);
    socket.broadcast.emit('message', {username: '系统消息', content: `${username}加入了聊天室`});
  });

  // 处理客户端消息发送
  socket.on('message', (message) => {
    const user = users.find(u => u.id === socket.id);
    if (user) {
      io.emit('message', {username: user.username, content: message});
    }
  });

  // 处理客户端断开连接
  socket.on('disconnect', () => {
    console.log('user disconnected');
    const user = users.find(u => u.id === socket.id);
    if (user) {
      users.splice(users.indexOf(user), 1);
      io.emit('userList', users);
      socket.broadcast.emit('message', {username: '系统消息', content: `${user.username}离开了聊天室`});
    }
  });
});

使用`io.on('connection', callback)`方法来处理客户端的连接请求。在回调函数中，首先将新连接的客户端信息存储到一个数组`users`中。当有客户端发送`login`事件时，将该客户端的用户名加入到`users`数组中，并使用`io.emit()`方法向所有客户端广播用户列表和系统消息。当有客户端发送`message`事件时，将该消息广播给所有客户端。当有客户端断开连接时，将该客户端从`users`数组中删除，并向所有客户端广播用户列表和系统消息。

客户端代码：

1. 连接服务器

const socket = io();

socket.on('connect', () => {
  console.log('connected');
});

使用`io()`方法连接服务器，并使用`socket.on('connect', callback)`方法处理连接成功的事件。

2. 处理用户登录和消息发送

const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const userList = document.querySelector('#userList');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const username = input.value.trim();
  if (username) {
    socket.emit('login', username);
    form.style.display = 'none';
    ul.style.display = 'block';
  }
});

socket.on('userList', (users) => {
  userList.innerHTML = '';
  users.forEach(user => {
    const li = document.createElement('li');
    li.textContent = user.username;
    userList.appendChild(li);
  });
});

socket.on('message', (message) => {
  const li = document.createElement('li');
  li.textContent = `${message.username}: ${message.content}`;
  ul.appendChild(li);
});

input.addEventListener('keyup', (event) => {
  if (event.keyCode === 13) {
    const message = input.value.trim();
    if (message) {
      socket.emit('message', message);
      input.value = '';
    }
  }
});

使用`addEventListener()`方法处理表单的提交事件。当用户输入用户名并提交表单时，将该用户名发送给服务器。在`userList`事件中，根据服务器返回的用户列表更新用户列表的显示。在`message`事件中，根据服务器返回的消息更新消息列表的显示。使用`addEventListener()`方法处理输入框的按键事件。当用户在输入框中按下回车键时，将输入框中的消息发送给服务器。

使用Express框架实现跳转到聊天室页面的方法：

1. 安装Express框架

使用`npm`命令安装Express框架：

npm install express

2. 创建Express应用程序对象

const express = require('express');
const app = express();

创建一个`express`应用程序对象`app`。

3. 设置路由

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

使用`app.get()`方法设置路由。当用户访问根路径时，将`index.html`文件发送到客户端。

4. 启动服务器

app.listen(8000, () => {
  console.log('listening on *:8000');
});

使用`app.listen()`方法启动服务器，并监听`8000`端口。

将以上代码保存为`app.js`文件，使用`node`命令运行该文件：

node app.js

在浏览器中访问`http://localhost:8000`，即可跳转到聊天室页面。