Node.js 微信开发教程二：使用 Socket.io 实现微信聊天室-JavaScript中文网-JavaScript教程资源分享门户

在上一篇文章中，我们介绍了如何使用 Node.js 和 Express 框架搭建一个简单的微信公众号后台。在本文中，我们将进一步扩展这个后台，使用 Socket.io 实现一个实时聊天室。

什么是 Socket.io？

Socket.io 是一个实时通讯库，它建立在 WebSocket 协议之上，提供了更高级别的抽象，使得开发者可以轻松地在客户端和服务器之间进行实时通讯。

在 Node.js 中，我们可以使用 Socket.io 库来快速搭建一个实时通讯系统。下面是一个简单的示例：

// javascriptcn.com 代码示例
// server.js
const io = require('socket.io')();

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);
    io.emit('chat message', msg);
  });
});

io.listen(3000);

// index.html
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  $('form').submit(() => {
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });

  socket.on('chat message', (msg) => {
    $('#messages').append($('<li>').text(msg));
  });
</script>

这个示例展示了如何使用 Socket.io 在客户端和服务器之间进行实时聊天。在服务器端，我们使用 io.on('connection') 监听客户端的连接事件，然后在客户端连接成功后，我们可以在 socket.on('chat message') 中监听客户端发送的消息，并使用 io.emit('chat message') 向所有连接的客户端广播这个消息。

在客户端，我们使用 const socket = io() 来建立与服务器的连接，然后在 $('form').submit() 中监听用户输入的消息，并使用 socket.emit('chat message') 向服务器发送这个消息。同时，我们也使用 socket.on('chat message') 来监听服务器广播的消息，并在页面上显示这些消息。

实现微信聊天室

现在我们已经了解了 Socket.io 的基本用法，接下来让我们来实现一个微信聊天室。我们将在上一篇文章中搭建的微信公众号后台基础上进行扩展。

首先，我们需要在 Express 中使用 socket.io 中间件来启用 Socket.io：

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

const server = require('http').Server(app);
const io = require('socket.io')(server);

// ...

然后，我们需要在客户端页面中引入 Socket.io 客户端库：

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

接下来，我们需要在服务器端监听客户端的连接事件，并在连接成功后将这个客户端加入聊天室：

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

  // 将新加入的客户端加入聊天室
  socket.join('room1');

  // ...
});

在客户端页面中，我们需要使用 io() 方法建立与服务器的连接，并在连接成功后发送一个 join 事件，告诉服务器我们要加入聊天室：

const socket = io();

socket.on('connect', () => {
  socket.emit('join', { room: 'room1' });
});

现在，我们已经将客户端加入了聊天室。接下来，我们需要监听客户端发送的消息，并将这些消息广播给聊天室中的其他客户端：

socket.on('message', (msg) => {
  io.to('room1').emit('message', msg);
});

在客户端页面中，我们需要监听用户输入的消息，并使用 socket.emit('message') 向服务器发送这个消息：

$('form').submit(() => {
  socket.emit('message', $('#m').val());
  $('#m').val('');
  return false;
});

最后，我们需要在客户端页面中，使用 socket.on('message') 来监听服务器广播的消息，并在页面上显示这些消息：

socket.on('message', (msg) => {
  $('#messages').append($('<li>').text(msg));
});

现在，我们已经完成了微信聊天室的实现。完整的代码可以参考下面的示例：

// javascriptcn.com 代码示例
// server.js
const express = require('express');
const app = express();

const server = require('http').Server(app);
const io = require('socket.io')(server);

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

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

  // 将新加入的客户端加入聊天室
  socket.join('room1');

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

  socket.on('message', (msg) => {
    io.to('room1').emit('message', msg);
  });
});

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

// index.html
<!DOCTYPE html>
<html>
  <head>
    <title>微信聊天室</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script>
      const socket = io();

      socket.on('connect', () => {
        socket.emit('join', { room: 'room1' });
      });

      $('form').submit(() => {
        socket.emit('message', $('#m').val());
        $('#m').val('');
        return false;
      });

      socket.on('message', (msg) => {
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>
</html>

总结

本文介绍了如何使用 Socket.io 实现一个简单的微信聊天室。Socket.io 提供了非常方便的实时通讯功能，可以帮助我们快速搭建一个实时聊天系统。在实际开发中，我们可以根据需求，进一步扩展和优化这个聊天室，例如增加用户认证、消息持久化等功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650efa2d95b1f8cacd7f0dc0