基于socket.io 协议的长连接通信——交互模块

基于socket.io 协议的长连接通信——交互模块
需求

大屏展示数据,通过手机端H5页面操作控制大屏上的模块，实现聚焦高亮或跳转

1、前端react 项目中 安装客户端模块

npm/cnpm  i  socket.io-client  –S

2、服务方面

目前解决方案：启动基于node的一个聊天dome 当做服务
后期解决方案：开发Java版的基于socket.io 的服务

3、封装的工具方法

3.1 主要有socket.js 、 socket-common.js两个文件

3.2 socket-common.js 中内容

主要定义一些变量名称

//前后端共同定义消息类型,发出相应消息和监听相应消息类型必须匹配

export const C_IMEVT_COMMON$DATA = '2';

/**
  由客户端发出 - 协议类型：发送通用数据（注意：此事件一定要与服务端protocal-type.js中定义的保持一致！）
**/ 

export const S_IMEVT_DUPLICATED = 's_evt.duplicated';

/** 
  由服务端发出 - 协议类型：重复登陆被踢消息（注意：此事件一定要与服务端protocal-type.js中定义的保持一致！）
**/ 

 export const S_IMEVT_ILLEGAL = 's_evt.illegal';

/** 
由服务端发出 - 协议类型：非法连接被拒绝服务事件（即服务将未带有合法认证信息的socket踢掉前发出的事件通知，防止非法连接和攻击）
 （注意：此事件一定要与服务端protocal-type.js中定义的保持一致！）
**/  

3.3 socket.js中内容
主要是一些属性和调用的方法 （没有集成登录权限判断的方法）

1、_socket  //实例对象

2、callback_showChatMessage  //收到服务端的回调函数

3、Socket.initConnect   初始化连接方法

4、Socket.sendData     将消息通过websocket发送出去

5、Socket.disconnectSocket  客户端主动断开客户端socket连接

4、socket.initConnect 里的方法

   发起首次连接和认证
    this._socket = SocketIOClient.connect(wsUrl, {
        query: 'token='+JSON.stringify(data),//至于query 后期可根据我们的业务是否需要
        forceNew:true,               // 加了此选项才能让客户端socketio.disconnect()生效！
        secure:supportSSL?true:false // 是否支持SSL/TLS
    });
    //成功时的回调
    this._socket.on('connect', function () {
        that.logInfo('[E] 本客户端的Socket connect 事件已经触发', true)
    });
    //断开时的回调
    this._socket.on('disconnect', function (data) {// data content is "io server disconnect"
        that.logInfo('[E] 本客户端的Socket disconnect 事件已经触发【END】!',true)
    });
     //重连接时出错
    this._socket.on('connect_error', function (data) {
        that.logInfo('[E] 本客户端 connect_error 事件已触发'+JSON.stringify(data), true);
    });
    //超时
    this._socket.on('connect_timeout', function () {
        that.logInfo('[E] 本客户端 connect_timeout 事件已触发', true);
    });
     this._socket.on('error', function (err) {
        that.logInfo('[E] 本客户端 error 事件已经触发'+err, true);
    });
    //重新连接到服务器
    this._socket.on('reconnect', function () {
        that.logInfo('[E] 本客户端 reconnect 事件已触发', true);
    });
    //不间断尝试重连接
    this._socket.on('reconnect_attempt', function () {
        console.log(this)
        that.logInfo('[E] 本客户端 reconnect_attempt 事件已触发', true);
    });
    this._socket.on('reconnect_failed', function () {
        that.logInfo('[E] 本客户端 reconnect_failed 事件已触发', true);
    });
    //报错时走这个方法
    this._socket.on('reconnect_error', function () {
        that.logInfo('[E] 本客户端 reconnect_error 事件已触发', true);
    });
    //心跳
    //连接存活验证 
    //发出
    this._socket.on('ping', function () {
        that.logInfo('[E] 心跳请求已发出 →', true);
    });
    //收到
    this._socket.on('pong', function () {
        that.logInfo('[E] 心跳响应已收到 ←', true);
    });
    //监听C_IMEVT_COMMON$DATA类型的消息
    this._socket.on(C_IMEVT_COMMON$DATA, function (p) {
        that.logInfo('收到消息：'+JSON.stringify(p), true);
        // 将收到的消息通知应用层显示出来
        that.callback_showChatMessage(p);
    });

5、在react项目中使用说明

我是在common文件夹中放置socket.js  、 socket-common.js
1、在组件中 import Socket from '../common/socket'  //路径自己写

2、在 componentDidMount生命周期里initConnect 并写入回调

//例如: 
Socket.initConnect('http://192.168.7.4:3000',{
loginUserId: "[e-mail]"},true)

//写入回调,
//给socket.js  callback_showChatMessage 属性赋值回调

Socket.callback_showChatMessage = function(data){
   console.log(data)
}
3、send 数据
在发送端 因为使用uuid 所以 npm i uuid –S
在页面 import uuid from ‘uuid’

例如
    let obj = {
    }
    //因为目前利用的是IM官方提供的基于node服务的dome,后期可根据我们的业务定义需要传递的参数
    let data = {
        dataContent:JSON.stringify(obj), //发送的内容   //由于目前定义的消息类型只支持字符串，后期可跟后台重新定义
        fp: uuid.v1(), //生成唯一标识 //通常我们使用基于时间戳 v1() 生成的UID，随机生成 v4() 还是有一定几率重复的。
        from: "[e-mail]",  //发消息的账户名称
        to: "[e-mail]", //收消息的账户名称
        type: "2", //定义的消息类型
    }
    Socket.sendData(data)