Node.js结合Socket.IO实现的即时通讯功能详解

什么是Socket.IO

Socket.IO 是一个 JavaScript 库，用于实现实时、双向、基于事件的通信。它可在不同的浏览器和操作系统下使用，并与任何服务端 -- 不论它是基于 Node.js 的还是不是 -- 兼容。它主要用于实现即时通讯功能，例如聊天室、弹幕等。

实现 Socket.IO

安装依赖

我们可以使用 npm（Node.js 自带的包管理器）来安装 Socket.IO。

npm install socket.io

服务端代码

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

// 监听端口
http.listen(3000, () => {
  console.log('listening on *:3000');
});

// 监听连接事件
io.on('connection', (socket) => {
  console.log('a user connected');
  // 监听聊天消息事件
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    // 将消息广播给已连接的其他客户端
    io.emit('chat message', msg);
  });
  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

客户端代码

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO chat</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font: 13px Helvetica, Arial; }
    form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
    form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
    form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages li { padding: 5px 10px; }
    #messages li:nth-child(odd) { background: #eee; }
  </style>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script>
    const socket = io();
    // 监听聊天消息事件
    socket.on('chat message', (msg) => {
      console.log('message: ' + msg);
      // 插入消息到页面
      $('#messages').append($('<li>').text(msg));
      // 滚动显示
      window.scrollTo(0, document.body.scrollHeight);
    });
    // 发送消息
    $('form').submit(() => {
      // 发送消息事件
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>
</body>
</html>

示例说明

示例一

我们可以使用 Node.js 和 Socket.IO 实现一个简单的聊天室。

首先，我们需要建立服务端和客户端的连接。在服务端，我们监听 connection 事件，获取客户端的连接。在客户端，我们使用 io() 方法创建连接。

// 服务端
const io = require('socket.io')(http);
io.on('connection', (socket) => {
  console.log('a user connected');
});

// 客户端
const socket = io();

然后，我们需要监听客户端发送的消息，和向客户端发送消息。在服务端，我们监听 chat message 事件，获取消息内容并广播给连接的其他客户端。在客户端，我们监听 chat message 事件，向页面插入消息。

// 服务端
socket.on('chat message', (msg) => {
  console.log('message: ' + msg);
  io.emit('chat message', msg);
});

// 客户端
socket.on('chat message', (msg) => {
  $('#messages').append($('<li>').text(msg));
  window.scrollTo(0, document.body.scrollHeight);
});

示例二

我们可以使用 Node.js 和 Socket.IO 实现一个多人弹幕功能。

首先，我们需要建立服务端和客户端的连接。同样地，在服务端，我们监听 connection 事件，获取客户端的连接。在客户端，我们使用 io() 方法创建连接。

// 服务端
const io = require('socket.io')(http);
io.on('connection', (socket) => {
  console.log('a user connected');
});

// 客户端
const socket = io();

然后，我们需要监听客户端发送的弹幕消息，和向客户端发送弹幕。在服务端，我们监听 bullet 事件，获取弹幕内容并广播给连接的其他客户端。在客户端，我们向服务端发送弹幕消息，并将其显示在页面上。

// 服务端
socket.on('bullet', (msg) => {
  console.log('bullet: ' + msg);
  io.emit('bullet', msg);
});

// 客户端
socket.emit('bullet', message);
$('<p>', {
  text: message,
  style: `top: ${position}px; color: ${color}; font-size: ${size}px;`
}).appendTo('#bullet-container');

注意，我们需要给每一个弹幕一个随机的显示颜色、字体大小和显示位置。这可以使用 JavaScript 生成随机数来实现。

const color = getRandomColor();
const size = getRandomSize();
const position = getRandomPosition();

完整的示例代码可以在这里找到：Node.js 和 Socket.IO 实现的多人弹幕。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs结合Socket.IO实现的即时通讯功能详解 - Python技术站

nodejs结合Socket.IO实现的即时通讯功能详解