基于socket.io 协议的长连接通信——交互模块
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、initConnect 里的方法
发起首次连接和认证
this._socket = SocketIOClient.connect(wsUrl, {
query: 'token='+JSON.stringify(data),
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项目中使用说明
1、在组件中 import Socket from '../common/socket' //路径自己写
2、在 componentDidMount生命周期里initConnect 并写入回调
//例如:
Socket.initConnect('http://192.168.7.4:3000',{loginToken: "47384h3uhjfh3j4j343j434h44",
loginUserId: "[email protected]"},true)
//写入回调,给socket.js callback_showChatMessage 属性赋值回调
Socket.callback_showChatMessage = function(data){
if(data.dataContent){
let Obj = JSON.parse(data.dataContent)
}
}