node.js中Socket.IO的进阶使用技巧

下面是“node.js中Socket.IO的进阶使用技巧”的完整攻略,包含两条示例说明。

Socket.IO概述

Socket.IO是一个实时应用程序框架,它使得在Web浏览器和服务器之间进行实时双向通信变得非常容易。它允许在混合Websockets、HTTP请求和轮询之间动态选择最佳的通信通道。在Node.js中,Socket.IO利用了底层的EventEmitter来实现事件处理和回调。

Socket.IO基础功能

1.连接

要与服务器建立Socket.IO连接,客户端所需要做的就是通过Socket.IO库创建一个新的socket对象并连接到服务器。

const socket = io.connect('http://example.com');

在这里,io是全局Socket.IO库的一个实例,它创建了一个新的socket对象,以连接到指定的服务器。如果省略参数,则将连接到当前URL。

在连接成功后,Socket.IO将触发一个名为connect的事件。

2.传递数据

一旦连接建立,双方就可以开始在服务器和客户端之间传递数据。在客户端,可以使用socket.emit()方法向服务器发送数据:

socket.emit('message', 'Hello, server!');

在服务器端,可以监听message事件并通过回调函数获取客户端发送的数据:

socket.on('message', (data) => {
  console.log('Received message:', data);
});

特别的,Socket.IO还提供了socket.send()方法作为socket.emit('message', ...)的快捷方式。

3.关闭连接

要从服务器断开连接,可以使用socket.disconnect()方法:

socket.disconnect();

在客户端调用该方法时,Socket.IO将向服务器发送一个关闭连接的请求,并在成功关闭连接后触发disconnect事件。

Socket.IO进阶功能

1.房间功能

在Socket.IO中,房间是用于将多个socket连接组织在一起的抽象概念。它类似于信仰群或讨论组,所有属于该房间的成员都可以接收到对房间的广播消息。

对于每个socket对象,Socket.IO都提供了一个join()方法和一个leave()方法,可以用于加入或离开某个房间。服务器可以使用socket.broadcast.to(room).emit()方法将消息发送到房间中的其他socket连接:

io.on('connection', (socket) => {
  console.log('A new client has connected');

  // 加入房间
  socket.join('chatroom');

  // 监听来自客户端的消息
  socket.on('message', (data) => {
    console.log('Received message:', data);

    // 将消息发送到所在房间内的其他客户端
    socket.broadcast.to('chatroom').emit('message', data);
  });

  // 断开连接时离开房间
  socket.on('disconnect', () => {
    console.log('A client has disconnected');
    socket.leave('chatroom');
  });
});

2.命名空间

命名空间是用于将socket.IO连接分组的另一种方式。每个socket.IO连接都必须隶属于某个命名空间,而每个命名空间又可以包含若干个房间。

在Node.js中,可以通过创建新的Socket.IO实例来创建新的命名空间:

const nsp = io.of('/my-namespace');

创建了名为/my-namespace的新命名空间后,就可以如下使用:

nsp.on('connection', (socket) => {
  console.log('A new client has connected to my-namespace');

  // ...

  socket.on('disconnect', () => {
    console.log('A client has disconnected from my-namespace');
  });
});

示例1:使用命名空间

下面是一个关于如何在Socket.IO中使用命名空间及房间的例子,它可以让多个用户加入同一个聊天室,并接收到其他用户所发的信息。

服务器代码:

const http = require('http');
const socketIO = require('socket.io');

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end('Hello, world!\n');
});

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

const io = socketIO(server);

// 创建名为'/chat'的命名空间
const chatNamespace = io.of('/chat');

// 监听连接事件
chatNamespace.on('connection', (socket) => {
  console.log(`A new client connected to chat namespace: ${socket.id}`);

  // 监听加入聊天室事件
  socket.on('join room', (roomName) => {
    // 加入指定聊天室
    socket.join(roomName);
    console.log(`User ${socket.id} joined room ${roomName}`);
  });

  // 监听离开聊天室事件
  socket.on('leave room', (roomName) => {
    // 离开指定聊天室
    socket.leave(roomName);
    console.log(`User ${socket.id} left room ${roomName}`);
  });

  // 监听发送消息事件
  socket.on('send message', (data) => {
    // 将消息发送到指定房间
    chatNamespace.to(data.room).emit('message', {
      username: data.username,
      message: data.message
    });
    console.log(`User ${socket.id} sent a message to room ${data.room}`);
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log(`A client disconnected from chat namespace: ${socket.id}`);
  });
});

客户端代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Example</title>
</head>
<body>
  <h1>聊天室</h1>
  <input type="text" id="username" placeholder="用户名"><br/>
  <input type="text" id="roomName" placeholder="聊天室名称"><br/>
  <textarea id="message" rows="5" cols="30" placeholder="输入消息"></textarea><br/>
  <button id="joinRoom">加入聊天室</button>
  <button id="leaveRoom">离开聊天室</button>
  <button id="sendMessage">发送消息</button>
  <hr>
  <ul id="messages"></ul>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('/chat');
    const messages = document.getElementById('messages');

    // 监听连接事件
    socket.on('connect', () => {
      console.log(`Connected to server: ${socket.id}`);
    });

    // 监听断开连接事件
    socket.on('disconnect', () => {
      console.log(`Disconnected from server: ${socket.id}`);
    });

    // 监听消息事件
    socket.on('message', (data) => {
      console.log('Received message:', data);
      messages.innerHTML += `<li><strong>${data.username}:</strong> ${data.message}</li>`;
    });

    // 点击加入聊天室按钮
    document.getElementById('joinRoom').addEventListener('click', () => {
      const roomName = document.getElementById('roomName').value;
      socket.emit('join room', roomName);
    });

    // 点击离开聊天室按钮
    document.getElementById('leaveRoom').addEventListener('click', () => {
      const roomName = document.getElementById('roomName').value;
      socket.emit('leave room', roomName);
    });

    // 点击发送消息按钮
    document.getElementById('sendMessage').addEventListener('click', () => {
      const username = document.getElementById('username').value;
      const roomName = document.getElementById('roomName').value;
      const message = document.getElementById('message').value;
      socket.emit('send message', {username, room: roomName, message});
    });
  </script>
</body>
</html>

示例2:使用嵌套的命名空间

以下示例演示了如何在Socket.IO中创建嵌套命名空间。命名空间/finance下还有一个名为/stock的子命名空间,用户可以在其中关注某一种股票,并收到该股票最新的价格信息。

服务器代码:

const http = require('http');
const socketIO = require('socket.io');

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end('Hello, world!\n');
});

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

const io = socketIO(server);

// 创建名为'/finance'的命名空间
const financeNamespace = io.of('/finance');

// 创建名为'/stock'的子命名空间
const stockNamespace = financeNamespace.of('/stock');

// 模拟几只股票的当前价格
let stocks = {
  'AAPL': 138.72,
  'GOOG': 2329.96,
  'AMZN': 3454.91,
  'TSLA': 609.89
};

// 定时更新股票价格
setInterval(() => {
  // 随机选择一只股票并更改其价格
  const keys = Object.keys(stocks);
  const randomKey = keys[Math.floor(Math.random() * keys.length)];
  stocks[randomKey] += Math.random() * 20 - 10;

  // 将新价格广播给所有关注该股票的客户端
  stockNamespace.to(randomKey).emit('update price', {
    symbol: randomKey,
    price: stocks[randomKey]
  });
  console.log(`Stock ${randomKey} updated to ${stocks[randomKey]}`);
}, 3000);

// 监听连接事件
stockNamespace.on('connection', (socket) => {
  console.log(`A new client connected to stock namespace: ${socket.id}`);

  // 监听关注股票事件
  socket.on('follow stock', (symbol) => {
    // 加入以股票名字为房间名的房间,用于接收最新价格信息
    socket.join(symbol);
    console.log(`User ${socket.id} followed stock ${symbol}`);
  });

  // 监听取消关注事件
  socket.on('unfollow stock', (symbol) => {
    // 离开以股票名字为房间名的房间
    socket.leave(symbol);
    console.log(`User ${socket.id} unfollowed stock ${symbol}`);
  });

  // 监听断开连接事件
  socket.on('disconnect', () => {
    console.log(`A client disconnected from stock namespace: ${socket.id}`);
  });
});

客户端代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Example</title>
</head>
<body>
  <h1>关注股票</h1>
  <input type="text" id="symbol" placeholder="股票代码"><br/>
  <button id="follow">关注</button>
  <button id="unfollow">取消关注</button>
  <hr>
  <ul id="messages"></ul>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('/finance/stock');
    const messages = document.getElementById('messages');

    // 监听连接事件
    socket.on('connect', () => {
      console.log(`Connected to server: ${socket.id}`);
    });

    // 监听断开连接事件
    socket.on('disconnect', () => {
      console.log(`Disconnected from server: ${socket.id}`);
    });

    // 监听收到新价格事件
    socket.on('update price', (data) => {
      console.log('Received update:', data);
      messages.innerHTML += `<li>${data.symbol} - ${data.price}</li>`;
    });

    // 点击关注按钮
    document.getElementById('follow').addEventListener('click', () => {
      const symbol = document.getElementById('symbol').value;
      socket.emit('follow stock', symbol);
    });

    // 点击取消关注按钮
    document.getElementById('unfollow').addEventListener('click', () => {
      const symbol = document.getElementById('symbol').value;
      socket.emit('unfollow stock', symbol);
    });
  </script>
</body>
</html>

以上就是Node.js中Socket.IO的进阶使用技巧的完整攻略,包括Socket.IO的基础功能和进阶功能。希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:node.js中Socket.IO的进阶使用技巧 - Python技术站

(0)
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • nodejs 使用 js 模块的方法实例详解

    介绍如何在node.js中使用js模块,以下是详细的攻略: 1. js模块的引入 在node.js中,通常使用require语句来引入js模块。 require语句的格式如下: var module = require(‘module_name’); 其中,module_name是需要引入的js模块的名称路径。如果是自己创建的模块,可以使用相对路径名称来引用…

    node js 2023年6月8日
    00
  • Webpack5正式发布,有哪些新特性

    Webpack 5 正式发布, 有哪些新特性 Webpack 5 是目前最新版本的 Webpack,在 2020 年 10 月 10 日正式发布。相对于 Webpack 4,Webpack 5 带来了许多重要改进,并增加了一些新特性。 下面是 Webpack 5 的一些新特性: 1. 更快的构建速度 Webpack 5 明显提高了构建速度,在代码的编译和 B…

    node js 2023年6月8日
    00
  • 详解Nodejs基于mongoose模块的增删改查的操作

    当我们使用 Node.js 构建应用程序时,我们通常需要连接数据库操作数据。Mongoose 是一个在 Node.js 中操作 MongoDB 数据库的 ODM(对象文档映射器)模块,它使得我们可以更加方便地进行数据存储与操作。 本文将详细讲解如何使用 Mongoose 模块进行增删改查的操作,主要包括以下内容: 连接 MongoDB 数据库 定义模型(Sc…

    node js 2023年6月8日
    00
  • 详谈Node.js之操作文件系统

    下面是详谈Node.js之操作文件系统的完整攻略: 操作文件系统 Node.js 中提供了 fs 模块来实现对文件系统的操作。 引入 fs 模块 使用 require 方法加载 fs 模块: const fs = require(‘fs’); 读取文件内容 使用 fs 模块的 readFile 接口读取文件内容: fs.readFile(‘file.txt’…

    node js 2023年6月8日
    00
  • node.js中的http.response.writeHead方法使用说明

    下面是关于“node.js中的http.response.writeHead方法使用说明”的完整攻略。 简介 在Node.js中,我们可以使用http模块来创建一个Web服务器。当服务器收到客户端请求后,服务器需要向客户端发送HTTP响应,可以使用http.response.writeHead方法来设置响应的头部信息。 http.response.write…

    node js 2023年6月8日
    00
  • Java使用Hutool实现AES、DES加密解密的方法

    下面就是Java使用Hutool实现AES、DES加密解密的方法的完整攻略: 1. 引入Hutool及相关依赖库 首先,在项目的pom.xml文件中添加Hutool依赖: <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</a…

    node js 2023年6月8日
    00
  • Node.js的模块化机制和Buffer对象详解

    使用Node.js开发应用时,模块化机制和Buffer对象是非常重要的概念,本文将详细讲解这两个方面的内容。 Node.js的模块化机制 Node.js采用了CommonJS规范来实现模块化,该规范定义了模块化的四个重要部分:模块定义、模块标识、模块引用和模块缓存。 模块定义 在Node.js中,每个文件都是一个模块。模块定义通过module.exports…

    node js 2023年6月8日
    00
  • pm2发布node配置文件ecosystem.json详解

    下面是pm2发布node配置文件ecosystem.json的完整攻略: 概述 PM2是一个流程管理工具,它可以帮助我们管理运行在服务器上的Node.js应用程序。通过使用PM2,我们可以轻松地启动、停止、重启、添加和监视应用程序。为了方便管理,可以将应用程序的配置文件编写成一个名为ecosystem.json的JSON文件,以描述应用程序的基本信息。 步骤…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部