SignalR开发的微信小程序使用websocket实现聊天功能

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

SignalR开发的微信小程序使用websocket实现聊天功能
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
        }
    }
}
View Code

浏览器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"是服务端返回的数据

 

SignalR开发的微信小程序使用websocket实现聊天功能

上一篇:如何搭建在线考试小程序


下一篇:Mysql常用函数操作