signalr 应用于微信小程序(二)
前言
本节基于一,为2017年写的脚本库。
正文
我们连接的是websocket那么我们需要看的是ws:
这里看到需要的参数其实只要connecttoken我们是没有的,那么如果得到的呢?
是网络请求还是本地生成的?网络请求的可能性比较大。
经过我查看源码是ajax得到的,那么我们应该看xhr了。
找到如何得到token的。
上图所示这样就可以看到token如何获取。
经过上诉分析后,只要收发包一致,那么就可以搞定。
代码如下:
2017年写的,代码很差,见谅。
const protocal = {
protocol: "json",
version: 1
};
const MessageType = {
/** Indicates the message is an Invocation message and implements the {@link InvocationMessage} interface. */
Invocation: 1,
/** Indicates the message is a StreamItem message and implements the {@link StreamItemMessage} interface. */
StreamItem: 2,
/** Indicates the message is a Completion message and implements the {@link CompletionMessage} interface. */
Completion: 3,
/** Indicates the message is a Stream Invocation message and implements the {@link StreamInvocationMessage} interface. */
StreamInvocation: 4,
/** Indicates the message is a Cancel Invocation message and implements the {@link CancelInvocationMessage} interface. */
CancelInvocation: 5,
/** Indicates the message is a Ping message and implements the {@link PingMessage} interface. */
Ping: 6,
/** Indicates the message is a Close message and implements the {@link CloseMessage} interface. */
Close: 7,
}
export class HubConnection {
constructor() {
this.openStatus = false;
this.methods = {};
this.negotiateResponse = {};
this.connection = {};
this.url = "";
this.invocationId = 0;
this.callbacks = {};
}
start(url, queryString) {
var negotiateUrl = url + "/negotiate";
if (queryString) {
for(var query in queryString){
negotiateUrl += (negotiateUrl.indexOf("?") < 0 ? "?" : "&") + (`${query}=` + encodeURIComponent(queryString[query]));
}
}
var timestamp = (new Date()).valueOf()/1000;
wx.request({
url: negotiateUrl +'&_='+timestamp+'',
method: "get",
async: false,
success: res => {
console.log(res.data);
this.negotiateResponse = res.data;
this.startSocket(negotiateUrl.replace("/negotiate",""));
},
fail: res => {
console.error(`requrst ${url} error : ${res}`);
return;
}
});
}
startSocket(url) {
var token =this.negotiateResponse.ConnectionToken;
token= token.replace(' ','+');
console.log(token);
var tid = Math.floor(Math.random() * 11);
url += (url.indexOf("?") < 0 ? "?" : "&") + ('connectionToken=' + encodeURIComponent(token) + '&transport=webSockets&clientProtocol=' + 1.5 + '&tid=' + tid);
url = url.replace(/^http/, "ws");
this.url = url;
if (this.connection != null && this.openStatus) {
return;
}
this.connection = wx.connectSocket({
url: url,
method: "get"
})
this.connection.onOpen(res => {
console.log(`websocket connectioned to ${this.url}`);
this.sendData(protocal);
this.openStatus = true;
this.onOpen(res);
});
this.connection.onClose(res => {
console.log(`websocket disconnection`);
this.connection = null;
this.openStatus = false;
this.onClose(res);
});
this.connection.onError(res => {
console.error(`websocket error msg: ${msg}`);
this.close({
reason: msg
});
this.onError(res)
});
this.connection.onMessage(res => this.receive(res));
}
on(method, fun) {
if (this.methods[method]) {
this.methods[method].push(fun);
console.log("方法" + method+"进入");
} else {
console.log("方法" + method + "进入");
this.methods[method] = [fun];
}
}
onOpen(data) {}
onClose(msg) {
}
onError(msg) {
}
close(data) {
if (data) {
this.connection.close(data);
} else {
this.connection.close();
}
this.openStatus = false;
}
sendData(data, success, fail, complete) {
console.log(data,"数据调用");
this.connection.send({
data: JSON.stringify(data), //
success: success,
fail: fail,
complete: complete
});
console.log(this.connection,'test');
}
receive(data) {
// if(data.data.length>3){
// data.data = data.data.replace('{}', "")
// }
// console.log(data,"数据接收");
var message =JSON.parse(data.data);
var messageDetail = message.M;
//console.log(messageDetail,"收到的数据");
var message = JSON.parse(data.data.replace(new RegExp("", "gm"),""));
//console.warn(typeof (messageDetail),"typeof (messageDetail)");
if (typeof (messageDetail) != 'undefined' && typeof (messageDetail[0]) !='undefined')
{
var invokemessage=messageDetail[0];
this.invokeClientMethod(message);
}
//留用数据类型
// switch (message.type) {
// case MessageType.Invocation:
// this.invokeClientMethod(message);
// break;
// case MessageType.StreamItem:
// break;
// case MessageType.Completion:
// var callback = this.callbacks[message.invocationId];
// if (callback != null) {
// delete this.callbacks[message.invocationId];
// callback(message);
// }
// break;
// case MessageType.Ping:
// // Don't care about pings
// break;
// case MessageType.Close:
// console.log("Close message received from server.");
// this.close({
// reason: "Server returned an error on close"
// });
// break;
// default:
// this.invokeClientMethod(message);
// //console.warn("Invalid message type: " + message.type);
// }
}
send(functionName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
this.sendData({
M: functionName,
A: args,
H: "chathub",
type: MessageType.Invocation,
I: this.invocationId
});
this.invocationId++;
}
invoke(functionName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var _this = this;
var id = this.invocationId;
var p = new Promise(function (resolve, reject) {
_this.callbacks[id] = function (message) {
if (message.error) {
reject(new Error(message.error));
} else {
resolve(message.result);
}
}
_this.sendData({
M: functionName,
A: args,
H: "chathub",
type: MessageType.Invocation,
I: _this.invocationId
}, null, function (e) {
reject(e);
});
});
this.invocationId++;
return p;
}
invokeClientMethod(message) {
console.log(message,"message");
//得到启用的方法
var methods = this.methods[message.M[0].M.toLowerCase()];
//console.log(this.methods,"methods方法");
//console.log(message.M[0].M.toLowerCase(),"methods数据");
if (methods) {
methods.forEach(m => m.apply(this, message.M[0].A));
if (message.invocationId) {
// This is not supported in v1. So we return an error to avoid blocking the server waiting for the response.
var errormsg = "Server requested a response, which is not supported in this version of the client.";
console.error(errormsg);
this.close({
reason: errormsg
});
}
} else {
console.warn(`No client method with the name '${message.target}' found.`);
}
}
}