网站开发创意想法,深圳网站建设yihe kj,什么网站可以做电子画册,邵阳网站建设优化asp.net core 使用 signalR#xff08;二#xff09;Intro上次介绍了 asp.net core 中使用 signalR 服务端的开发#xff0c;这次总结一下web前端如何接入和使用 signalR#xff0c;本文主要分两部分#xff0c;一是直接使用 aspnet/signalr 这个微软开发好的 signalR 的客… asp.net core 使用 signalR二Intro上次介绍了 asp.net core 中使用 signalR 服务端的开发这次总结一下web前端如何接入和使用 signalR本文主要分两部分一是直接使用 aspnet/signalr 这个微软开发好的 signalR 的客户端另一部分是使用 h5 原生的 websocket 直接连接 signalR 的 websocket使用 signalR 客户端安装 signalr 客户端 npm 包 npm installaspnet/signalr--save获取一个 connectionimport * as signalR from aspnet/signalr;
// ...
const connection new signalR.HubConnectionBuilder() .withUrl(Constants.HubUrl, { accessTokenFactory: () Constants.TestToken }) .build();
// accessTokenFactory 用于指定获取 accessToken 的方式如果不需要用户登录不需要认证没有这个配置添加客户端处理方法connection.on(GameAnswerResultReceived, (result:any){ showMessage(收到问题${result.QuestionId} 答案, JSON.stringify(result));
});
connection.on(GameOver, (result: object){ showMessage(游戏结束, Game Over\n ${JSON.stringify(result)});
});客户端调用服务器端方法调用服务器端方法没有返回值connection.send(CheckQuestionAnswer, { QuestionId: questionId, Answer: tbMessage.value, }, gameId);调用服务器端方法并获取返回值connection.invoke(CheckQuestionAnswer, { QuestionId: questionId, Answer: tbMessage.value, }, gameId) .then(result { console.log(result); showMessage(答案检查结果${result.Succeeded}, JSON.stringify(result)); });websocket 直接连接 signalR创建 websocket 连接let connection new WebSocket(${Constants.HubUrl}?access_token${Constants.TestToken});连接成功后发送使用协议信息signalr 发送的消息均以 0x1e 这个字符结尾在发送消息的时候需要在消息的最后增加 0x1e 字符connection.onopen (event) { // console.log(event); connection.send({protocol:json, version:1}${String.fromCharCode(0x1e)});
}以上代码表示我们要使用 JSON 的形式进行消息的序列化如果有较高的性能要求也可以使用 messagePack 二进制序列化消息内容对浏览器要求较高需要支持 xhr2)接受服务器端消息connection.onmessage (event) { var msg event.data.replace(String.fromCharCode(0x1e), ); //替换消息结束符 console.log(received message: ${msg}); let eventData JSON.parse(msg); if(eventData.type 1 eventData.target){ // type为1表示调用客户端的某一个方法 let func: (...args:any[])any callbacks[eventData.target]; if(func ! undefined){ func(...eventData.arguments); } }
}定义客户端方法callbacks[GameAnswerResultReceived] (result:any){ showMessage(收到问题${result.QuestionId} 答案, JSON.stringify(result));
};
callbacks[GameOver] (result){ showMessage(游戏结束, Game Over\n ${JSON.stringify(result)});
};调用服务器端方法// 可以把这个方法扩展为 WebSocket 的一个原型方法
function invokeMethod(webSocket: WebSocket, methodName:string, ...args: any[]) : Promisevoid { // type为1表示调用远程的方法(一个 RPC 调用)target为要调用的方法名称arguments为要调用的方法的参数 webSocket.send(${JSON.stringify({ arguments: args, target: methodName, type: 1, })}${String.fromCharCode(0x1e)}); return Promise.resolve();
}Memo上面的完全基于 websocket 去连接 signalr 的代码还有些简陋实际使用的话可以再修改优化一下强类型调用服务器端的方法自定义的话可以在 websocket 的基础上封装一下signalr 强类型调用服务器端方法还没找到解决办法不过问题不大有兴趣的话可以研究一下 signalR 源码Referencehttps://docs.microsoft.com/en-us/aspnet/core/signalr/javascript-client?viewaspnetcore-2.2https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-webpack?viewaspnetcore-2.2tabsvisual-studiohttps://github.com/aspnet/AspNetCore/tree/master/src/SignalRhttps://github.com/aspnet/SignalR-samples
