实现 Node.js 聊天程序 (3): 使用 Socket.io 进行实时消息传递-JavaScript中文网-JavaScript教程资源分享门户

在前两篇文章中，我们分别介绍了如何使用 Express 框架搭建 Node.js 聊天程序和如何使用 MongoDB 存储聊天记录。在本篇文章中，我们将介绍如何使用 Socket.io 进行实时消息传递，使得我们的聊天程序可以实现实时通信。

Socket.io 简介

Socket.io 是一个实现了实时、双向、事件驱动通信的 JavaScript 库。它可以让我们在浏览器和服务器之间建立实时通信的连接，从而实现实时消息传递。Socket.io 支持多种传输方式，包括 WebSocket、轮询、长轮询等，可以根据浏览器和服务器的支持情况自动选择最佳的传输方式。

安装 Socket.io

在使用 Socket.io 之前，需要先安装它。在命令行中执行以下命令即可安装 Socket.io：

npm install socket.io --save

使用 Socket.io 实现实时消息传递

下面我们将介绍如何使用 Socket.io 实现实时消息传递。

在服务器端引入 Socket.io

在服务器端的 app.js 文件中，我们需要引入 Socket.io，并在服务器启动时创建一个 Socket.io 实例。具体代码如下：

// javascriptcn.com 代码示例
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

// ...

server.listen(3000, function() {
  console.log('Server listening on port 3000');
});

在客户端引入 Socket.io

在客户端的 index.html 文件中，我们需要引入 Socket.io 客户端库，具体代码如下：

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

监听连接事件

在服务器端，我们需要监听 Socket.io 的连接事件，当客户端连接上来时，执行相应的操作。具体代码如下：

io.on('connection', function(socket) {
  console.log('A user connected');
});

监听客户端发送的消息

在服务器端，我们还需要监听客户端发送的消息，当收到消息时，将消息广播给所有连接上来的客户端。具体代码如下：

io.on('connection', function(socket) {
  console.log('A user connected');

  socket.on('chat message', function(msg) {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

发送消息到服务器

在客户端，我们需要通过 Socket.io 将消息发送到服务器。具体代码如下：

var socket = io();

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

接收服务器发送的消息

在客户端，我们还需要监听服务器发送的消息，当收到消息时，将消息显示在页面上。具体代码如下：

var socket = io();

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

示例代码

完整的示例代码如下：

app.js

// javascriptcn.com 代码示例
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(__dirname + '/public'));

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

io.on('connection', function(socket) {
  console.log('A user connected');

  socket.on('chat message', function(msg) {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', function() {
    console.log('A user disconnected');
  });
});

server.listen(3000, function() {
  console.log('Server listening on port 3000');
});

index.html

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Socket.io Chat</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off">
    <button>Send</button>
  </form>
  <script>
    var socket = io();

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

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

总结

本篇文章介绍了如何使用 Socket.io 实现实时消息传递，使得我们的聊天程序可以实现实时通信。Socket.io 是一个非常强大的 JavaScript 库，可以用于实现各种实时应用，包括聊天程序、实时游戏等。希望本文能够对读者有所帮助。

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