.NET 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

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：把连接改为你的连接

<template>
    <view>
        <button type="primary" @tap='getSignalR'>访问signalR</button>
        <button type="primary" @tap='openWebSocket'>打开websocket</button>
        <input type="text" v-model="msg" placeholder="请输入消息"/>
        <button type="primary" @tap='sendMsg()'>发送</button>
 
        <view>
            <view v-for="item in result">
                <text>{{item}}</text>
            </view>
        </view>
    </view>
</template>
 
<script>
    var _this;
    export default {
        data() {
            return {
                result: [],
                socketOpen:false,
                msg:"",
                websocketData: {},
                
            }
        },
        onLoad() {
            _this = this;
        },
        methods: {
            getSignalR() {
                let url = 'http://192.168.31.171:8088/signal/negotiate?clientProtocol=1.5&connectionData=[{"name":"chathub"}]&_=1564798079763'
                uni.request({
                    url: url, 
                    data: {
                        text: 'uni.request'
                    },
                    header: {
                         //自定义请求头信息
                    },
                    success: (res) => {
                        console.log(res);
                        _this.websocketData = res.data;
                        _this.result.push( 'request success');
                    }
                });
            },
            openWebSocket() {
                let token = encodeURIComponent(_this
                    .websocketData.ConnectionToken)
                let url = 'ws://192.168.31.171:8088/signal/connect?transport=webSockets&clientProtocol=1.5&connectionData=[{"name":"chatHub"}]&connectionToken=' +
                    token + '&tid=1'
                console.log(url)
                uni.connectSocket({
                    url: url
                });
                uni.onSocketOpen(function(res) {
                    console.log(res);
                    _this.socketOpen = true;
                    console.log('WebSocket连接已打开！');
                    _this.result.push("WebSocket连接已打开！");
                });
                uni.onSocketError(function(res) {
                    console.log(res);
                    _this.result.push('WebSocket连接打开失败，请检查！')
                    console.log('WebSocket连接打开失败，请检查！');
                });
 
                uni.onSocketMessage(function(res) {
                    _this.result.push('收到服务器内容：' + res.data );
 
                    console.log('收到服务器内容：' + res.data);
                });
                
            },
            
            sendMsg(){
                if(!_this.socketOpen)
                    return;
                    
                uni.sendSocketMessage({
                    data: _this.msg
                });
            }
        }
    }
</script>
<style>
</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"是服务端返回的数据