# 开发 Socket.IO 接口

本章介绍 Socket.IO 接口的安装导入和使用方法。

# 概述

Socket.IO 在客户端和服务器之间传递事件，实现低延迟的双向通信，以下介绍 Socket.IO 的安装导入和使用步骤。

# 安装导入

1. 以 Vue 为例，从 vue.min.jsopen in new window 获取 vue.min.js，从 socket.io.jsopen in new window 获取 socket.io.js。

2. 参考以下示例，在前端引入 vue.js 和 Socket.IO。

   <!-- 引入vue-->
   <script src="./vue/vue.min.js"></script>
   <!-- 引入socketio client-->
   <script src="./socketio/socket.io.js"></script>
   
   说明：

   Socket.IO 使用请参考 Socket.IOopen in new window。

3. 参考以下示例，在后端导入 Socket.IO。

   var io = require("socket.io");
   
   注意：

   JSRE 目前支持的 Socket.IO 是 v2.2 版本，socket.io-client 需要安装 v2.x 版本。

# 操作步骤

以下介绍 Socket.IO 的使用步骤。

# 步骤 1：创建 Socket.IO 连接

1. 参考以下示例，创建前端连接。

   const auth = {
     "edger-token": this.token,
     "edger-srand": this.srand,
   };
   this.socket = io({
     query: auth,
   });
   

2. 参考以下示例，创建后端服务，并监听已连接事件。

   var socketio = io(app, {
     serveClient: false,
     pingInterval: 10000,
     pingTimeout: 5000,
   });
   

参数说明

# 步骤 2：监听 Socket.IO 连接事件

1. 参考以下示例，在前端监听连接事件，连接事件中可以进行一些初始化操作，以及监听用户自定义事件。

   this.socket.on("connect", () => {
     console.log("已连接！");
   });
   

2. 参考以下示例，在后端监听前端用户请求事件。

   socketio.on("connection", function(socket) {
     // ...
   });
   

# 步骤 3：收发消息

1. 参考以下示例，前端可以使用 socket.emit() 方法向后端发送消息。

   send: function() {
     this.socket.emit('message', this.message, (response) => {
       this.response = response;
     });
   }
   
   说明：

   • message：用户自定义事件。
   • this.message：事件参数，emit 事件参数可以是不定参数。
   • emit：最后一个参数如果是函数，则表示该事件将等待对方回复消息。

2. 参考以下示例，在后端监听事件接收消息，socket.on() 参数与前端程序参数保持对应。

   socketio.on('connection', function (socket) {
     const userInfo = socket.handshake.eos.user // 提取用户信息
   
     socket.on('message', (msg, callback) => {
       callback(`server: ${msg}`)
     })
   })
   

# userInfo 数据结构