用Node.js + Socket.IO搭建一对一即时聊天室

2023-10-11 10:10:43

前言

在现代互联网应用中，即时聊天功能已经成为不可或缺的一部分。无论是社交网络、游戏、还是企业内部沟通，实时聊天都可以帮助人们快速、高效地交流信息。实现一对一即时聊天应用，重要的一点就是消息能够实时的传递，一种方案就是熟知的使用 Websocket 协议，本文中我们使用 Node.js 中的一个框架 Socket.io 来实现。

搭建聊天室的前端页面

首先，我们先来搭建聊天室的前端页面，这里我们将使用HTML、CSS和JavaScript来实现。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="chat-window">
      <ul class="messages"></ul>
      <form id="chat-form">
        <input type="text" id="chat-input" placeholder="Enter your message">
        <button type="submit">Send</button>
      </form>
    </div>
  </div>

  <script src="socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-window {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  padding: 20px;
}

.messages {
  list-style-type: none;
  padding: 0;
}

.message {
  margin-bottom: 10px;
}

.sender {
  color: blue;
}

.receiver {
  color: green;
}

#chat-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chat-input {
  width: 200px;
  padding: 5px;
  margin-right: 10px;
}

#chat-button {
  padding: 5px;
}

// 获取聊天窗口和输入框元素
const chatWindow = document.querySelector('.chat-window');
const chatInput = document.querySelector('#chat-input');

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

// 监听服务器发送的消息
socket.on('message', (data) => {
  // 创建一个新的消息元素
  const message = document.createElement('li');
  message.classList.add('message');

  // 根据发送者和接收者设置消息样式
  if (data.sender === 'server') {
    message.classList.add('sender');
  } else {
    message.classList.add('receiver');
  }

  // 将消息内容添加到元素中
  message.innerHTML = data.message;

  // 将消息元素添加到聊天窗口中
  chatWindow.appendChild(message);
});

// 监听聊天表单的提交事件
document.querySelector('#chat-form').addEventListener('submit', (e) => {
  e.preventDefault();

  // 获取输入框中的消息内容
  const message = chatInput.value;

  // 将消息发送给服务器
  socket.emit('message', message);

  // 清空输入框
  chatInput.value = '';
});

搭建聊天室的后端服务

接下来，我们来搭建聊天室的后端服务，这里我们将使用Node.js和Socket.IO来实现。

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

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

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

// 启动服务器
const server = app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

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

// 监听客户端的连接
io.on('connection', (socket) => {
  console.log('A new client connected');

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

  // 监听客户端的断开连接
  socket.on('disconnect', () => {
    console.log('A client disconnected');
  });
});