Mongoose 实战：创建带 Socket 的聊天室系统-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用开发中，实时通信是非常重要的一环，越来越多的应用需要实现即时聊天功能。本文将介绍如何使用 Mongoose 和 Socket.io 技术创建一个简单的聊天室系统，并讲解一些实现的细节和技巧。

环境搭建

在开始之前，需要先安装 Node.js 和 MongoDB。安装完成后，使用 npm 安装 Mongoose 和 Socket.io：

npm install mongoose socket.io

创建数据库模型

首先，我们需要创建一个数据库模型来存储聊天记录。在 Mongoose 中，可以通过 Schema 来定义模型的结构和字段类型：

// javascriptcn.com 代码示例
const mongoose = require('mongoose');

const chatSchema = new mongoose.Schema({
  name: String,
  message: String,
  date: { type: Date, default: Date.now }
});

const Chat = mongoose.model('Chat', chatSchema);

module.exports = Chat;

在这个模型中，有三个字段：name 表示发送消息的用户昵称，message 表示消息内容，date 表示消息发送时间。

创建 Socket 服务器

接下来，我们需要创建一个 Socket 服务器，用于实现实时通信功能。在 Node.js 中，可以使用 Socket.io 库来实现。以下是创建 Socket 服务器的代码：

// javascriptcn.com 代码示例
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const mongoose = require('mongoose');
const Chat = require('./models/chat');

mongoose.connect('mongodb://localhost/chat', { useNewUrlParser: true });

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

在这个代码中，我们创建了一个 HTTP 服务器，并使用 Socket.io 将它升级为一个 WebSocket 服务器。使用 io.on('connection', callback) 可以监听客户端的连接请求，并得到一个 socket 对象。通过 socket.emit(name[, ...args][, ack]) 方法可以向客户端发送消息，通过 socket.on(name, callback) 方法可以监听客户端发来的消息。

处理客户端消息

现在，我们需要让服务器能够接收客户端发来的消息，并将其保存到数据库中。以下是实现代码：

// javascriptcn.com 代码示例
io.on('connection', (socket) => {
  console.log('a user connected');
  
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    const chat = new Chat({ name: msg.name, message: msg.message });
    chat.save((err) => {
      if (err) return console.error(err);
      io.emit('chat message', msg);
    });
  });
});

在这个代码中，我们监听了客户端的 chat message 事件，当收到该事件时，将消息保存到数据库中，并通过 io.emit(name[, ...args]) 方法向所有客户端广播消息。

创建客户端页面

最后，我们需要创建一个客户端页面，用于让用户输入昵称，并显示聊天记录。以下是实现代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Chat Room</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function () {
        const socket = io();

        $('form').submit(function(e){
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', { name: $('#name').val(), message: $('#m').val() });
          $('#m').val('');
          return false;
        });

        socket.on('chat message', function(msg){
          $('#messages').append($('<li>').text(msg.name + ': ' + msg.message));
        });
      });
    </script>
  </head>
  <body>
    <h1>Chat Room</h1>
    <ul id="messages"></ul>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br>
      <label for="m">Message:</label>
      <input type="text" id="m" name="message">
      <button>Send</button>
    </form>
  </body>
</html>

在这个页面中，用户可以输入昵称和消息内容，并通过点击“Send”按钮向服务器发送消息。服务器收到消息后，将其保存到数据库中，并通过 Socket 向所有客户端广播该消息。

总结

通过本文的介绍，我们了解了如何使用 Mongoose 和 Socket.io 技术创建一个简单的聊天室系统，并讲解了实现过程中的细节和技巧。我们还学习了如何使用 Express 框架创建 Web 应用程序，并与 WebSocket 服务器进行集成。相信读完本文，你已经掌握了实现即时通信功能所需的基本知识和技能，可以为你的 Web 应用程序增加更多实用的功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583723dd2f5e1655de5c1ba