[JavaScript知识库]singelR连接实现通信聊天

singelR连接实现通信聊天

singelR是什么？

SignalR是一个基于ASP.NET平台构建，利用JavaScript或者WebSockets，实现在客户端和服务端异步通信的框架(https://docs.microsoft.com/en-us/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-3.0&tabs=visual-studio)

简单使用：

SignalR会使用Javascript的长轮询（ long polling），实现客户端和服务端通信
前端通过(CarPositionChanged)像服务器发送一段数据,服务器接收后,再通过(RegisterClient)给前端推送相应的数据,整个过程中页面不会刷新

utils文件下的websocket.js文件

var senparcWebSocketConnection;
function buildConnectionAndStart(hubUrl, signalR, onStart, errorCallback,stickyCookie) {
  senparcWebSocketConnection = new signalR.HubConnectionBuilder()
    .withUrl(hubUrl)
    //.withAutomaticReconnect([0, 2000, 5000, 10000, 30000, 45000, 60000])
    .build(stickyCookie);
  senparcWebSocketConnection.start(onStart()).then().catch(function (err) {
    console.error(err.toString());
    if (errorCallback) {
      errorCallback();
    }
  });
  return senparcWebSocketConnection;
}

function requestServer(methodName, submitData) {
  senparcWebSocketConnection.invoke(methodName, submitData).catch(function (err) {
    return console.error(err.toString());
  });
}

function onReceiveMessage(methodName, receiveFunction) {
  senparcWebSocketConnection.on(methodName, function (res) {
    receiveFunction(res);
  });
}

module.exports = {
  buildConnectionAndStart: buildConnectionAndStart,
  requestServer: requestServer,
  onReceiveMessage: onReceiveMessage
}

utils文件下的onfire.js文件

!function (root, factory) {
    if (typeof module === 'object' && module.exports)
      module.exports = factory();
    else
      root.onfire = factory();
  }(typeof window !== 'undefined' ? window : this, function () {
    var __onfireEvents = {},
     __cnt = 0, // evnet counter
     string_str = 'string',
     function_str = 'function',
     hasOwnKey = Function.call.bind(Object.hasOwnProperty),
     slice = Function.call.bind(Array.prototype.slice);
  
    function _bind(eventName, callback, is_one, context) {
      if (typeof eventName !== string_str || typeof callback !== function_str) {
        throw new Error('args: '+string_str+', '+function_str+'');
      }
      if (! hasOwnKey(__onfireEvents, eventName)) {
        __onfireEvents[eventName] = {};
      }
      __onfireEvents[eventName][++__cnt] = [callback, is_one, context];
  
      return [eventName, __cnt];
    }
    
    function _each(obj, callback) {
      for (var key in obj) {
        if (hasOwnKey(obj, key)) callback(key, obj[key]);
      }
    }
   
    function on(eventName, callback, context) {
      return _bind(eventName, callback, 0, context);
    }


    function _fire_func(eventName, args) {
      if (hasOwnKey(__onfireEvents, eventName)) {
        _each(__onfireEvents[eventName], function(key, item) {
          item[0].apply(item[2], args); // do the function
          if (item[1]) delete __onfireEvents[eventName][key]; // when is one, delete it after triggle
        });
      }
    }

    function fireSync(eventName) {
      _fire_func(eventName, slice(arguments, 1));
    }
 
    return {
      on: on,
      fireSync: fireSync,
    };
  });

app.js中的应用

var signalR = require('utils/signalr.1.0.js');
可以去官网找：https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js
var senparcWebsocket = require('utils/websocket.js');
const onfire = require('/utils/onfire.js');


在app.js里面定义一个函数
socketConnection: function () {
		let _this = this;
		var hubUrl =
			this.globalData.hubHost +
			'/main/signalr-hubs/content-chat?token=' +
			this.globalData.accessToken;
		var onStart = function () {
			console.log('ws started');
		};
		var onError = async function () {
			if(!getNetworkType()){
				let refreshToken = wx.getStorageSync('tokenData').refreshToken;
				if(refreshToken) await updateToken.refreshHttp(refreshToken,this);
			}
			setTimeout(() => {
				_this.socketConnection();
			}, 2000);
		};

		senparcWebsocket.buildConnectionAndStart(
			hubUrl,
			signalR,
			onStart,
			onError,
			this.globalData.stickyCookie // 拿到的cookie
		);
		this.globalData.websocket = senparcWebsocket;
		senparcWebsocket.onReceiveMessage('OnConnected', (res) => {
			console.log('OnConnected连接成功');
			if (this.globalData.onConnected) {
				this.globalData.onConnected(res);
			}
		});
		//接收消息通知
		senparcWebsocket.onReceiveMessage('MessageCreated', (res) => {
			onfire.fireSync('MessageCreated', res);
		});
	  //也可以定义其它的函数（自定义）
	
		//WebSocket 连接成功
		wx.onSocketOpen((res) => {
			console.log('WebSocket 连接成功！');
		});
		//WebSocket 已关闭
		wx.onSocketClose((res) => {
			console.log('WebSocket 已关闭！');
			setTimeout(() => {
				this.socketConnection();
			}, 1000);
		});
		//WebSocket 打开失败
		wx.onSocketError((res) => {
			console.log('WebSocket连接打开失败，请检查！');
			setTimeout(() => {
				this.socketConnection();
			}, 5000);
		});
	},

页面中的使用inde.js

const onfire = require("../../utils/onfire.js")
var currentPage;
// 接收消息
onfire.on('MessageCreated', (res) => {
	if (currentPage) {
		currentPage.handleReceiveMessage && currentPage.handleReceiveMessage(res);
	}
});
Page({
onLoad(){},
onShow(){},
handleReceiveMessage(res){
//可以在这里写逻辑要求
console.log('接收消息-----')
}
})