ASP.NET SignalR依赖JQ,故小程序不能直接使用。
uniapp版
SignalR的构建就不多说了,网上多得是。
原理:仿照官方JS访问服务器的方式,先用get方式请求negotiate接口,获取websocket的token,再拼接ws连接得到微信能用的ws或者wss连接了,接下来看微信小程序接口。
注意事项:
1.微信小程序本地测试不需要wss的,直接本机运行项目,用局域网网址访问就可以了。
2.websocket需要IIS8才能支持,IIS Express可以用,但需要配置一下用IP访问 (微信内不能用localhost访问)
了解websocket机制
假设我在web端有一个聊天室页面,假设地址为https://www.xxx.com/chat.html,由于后端Startup.cs使用的是默认目录signalr
using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(Star.Web.Startup))] namespace Star.Web { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR();//启动SignalR默认目录:/signalr } } }
浏览器F12打开(以谷歌为例),点击Network,然后刷新页面或在页面发送一个消息,在下面Name里分别会出现negotiate开头和connect开头的Url。
1)点击negotiate开头的url,在头文件中(Headers)的General的RequestURL,显示访问地址是:
//signalr的negotiate https://www.text.com/signalr/negotiate?clientProtocol=1.5&connectionData=[{"name":"chatHub"}]&_=1576127697147
整理后的含义为:https://域名/signalr/negotiate?clientProtocol=1.5&connectionData=[{"name":"Hub名字"}]&_=时间戳
其中:Hub名字就是继承Hub类里的[HubName("Hub名字")],encodeURIComponent()编码
2)点击connect开头的url,在头文件中(Headers)的General的RequestURL,显示访问地址是:
//signalr的connect wss://www.test.com/signalr/connect?transport=webSockets&clientProtocol=1.5&connectionToken=……&connectionData=[{"name":"chatHub"}]&tid=1
整理后的含义为:wss://域名/signalr/connect?transport=webSockets&clientProtocol=1.5&connectionToken=Token字符串&connectionData=[{"name":"Hub名字"}]&tid=1
其中:Token字符串就是上一个请求返回的结果;tid经测试取值在0~10之间,待进一步测试.
Vue page:把连接改为你的连接
1 <template> 2 <view> 3 <button type="primary" @tap=‘getSignalR‘>访问signalR</button> 4 <button type="primary" @tap=‘openWebSocket‘>打开websocket</button> 5 <input type="text" v-model="msg" placeholder="请输入消息"/> 6 <button type="primary" @tap=‘sendMsg()‘>发送</button> 7 8 <view> 9 <view v-for="item in result"> 10 <text>{{item}}</text> 11 </view> 12 </view> 13 </view> 14 </template> 15 16 <script> 17 var _this; 18 export default { 19 data() { 20 return { 21 result: [], 22 socketOpen:false, 23 msg:"", 24 websocketData: {}, 25 26 } 27 }, 28 onLoad() { 29 _this = this; 30 }, 31 methods: { 32 getSignalR() { 33 let url = ‘http://192.168.31.171:8088/signal/negotiate?clientProtocol=1.5&connectionData=[{"name":"chathub"}]&_=1564798079763‘ 34 uni.request({ 35 url: url, 36 data: { 37 text: ‘uni.request‘ 38 }, 39 header: { 40 //自定义请求头信息 41 }, 42 success: (res) => { 43 console.log(res); 44 _this.websocketData = res.data; 45 _this.result.push( ‘request success‘); 46 } 47 }); 48 }, 49 openWebSocket() { 50 let token = encodeURIComponent(_this 51 .websocketData.ConnectionToken) 52 let url = ‘ws://192.168.31.171:8088/signal/connect?transport=webSockets&clientProtocol=1.5&connectionData=[{"name":"chatHub"}]&connectionToken=‘ + 53 token + ‘&tid=1‘ 54 console.log(url) 55 uni.connectSocket({ 56 url: url 57 }); 58 uni.onSocketOpen(function(res) { 59 console.log(res); 60 _this.socketOpen = true; 61 console.log(‘WebSocket连接已打开!‘); 62 _this.result.push("WebSocket连接已打开!"); 63 }); 64 uni.onSocketError(function(res) { 65 console.log(res); 66 _this.result.push(‘WebSocket连接打开失败,请检查!‘) 67 console.log(‘WebSocket连接打开失败,请检查!‘); 68 }); 69 70 uni.onSocketMessage(function(res) { 71 _this.result.push(‘收到服务器内容:‘ + res.data ); 72 73 console.log(‘收到服务器内容:‘ + res.data); 74 }); 75 76 }, 77 78 sendMsg(){ 79 if(!_this.socketOpen) 80 return; 81 82 uni.sendSocketMessage({ 83 data: _this.msg 84 }); 85 } 86 } 87 } 88 </script> 89 <style> 90 </style>
后续简单说下发送和接收消息体格式:
客户端向服务端发送消息体
格式:{"H":"chathub","M":"SendToOther","A":[{"Msg":"Hello World!","UserId":"085ac7c7-94be-4a41-93c7-c207939714b9"}],"I":2}
参数解释:"H":"ChatHub" 是集线器hub类,"M":"SendToOther"是集线器hub类暴露的方法,"A"是提交服务端的数据
服务端返回客户端的消息体
格式:{"C":"d-26707556-E,0|BP,5B|BQ,1","M":[{"H":"ChatHub","M":"UpdateLocalhost","A":[{"UserId":"51c0b472-ea1c-424d-8dc4-157ce0cf1ff2","SendTime":"2020-06-12 16:12:41","Msg":"Hello World!"}]}]}
参数解释:"H":"ChatHub" 是集线器hub类,"M":"UpdateLocalhost"是服务端返回客户端的标识,"A"是服务端返回的数据