背景

如題，這可能算是.net 做小程序的服務(wù)端時，繞不開的一個問題，老生常談了。同樣的問題，我記得我2018/19年的一個項目的解決方案是：

修改官方的SignalR.js的客戶端：把里面用到瀏覽器的Websocket改成微信小程序的官方api的。目前網(wǎng)上也有不少這樣的方案，已經(jīng)改好開源了；這種方案的缺點是可能有一段時間了，可能跟目前自己的服務(wù)端版本不兼容，跟目前自己微信小程序的運行環(huán)境不兼容。或者已經(jīng)有些隱藏bug等等，用上寫好業(yè)務(wù)了再發(fā)現(xiàn)bug頭疼得很。使用起來很沒有安全感；

我現(xiàn)在這里的方案是:

直接使用微信小程序的Websocket的原生api與服務(wù)端通信；

原生api文檔：https://developers.weixin.qq.com/minigame/dev/api/network/websocket/wx.connectSocket.html

服務(wù)端

運行環(huán)境：.net core 6 On Linux（k8s）ubuntu 18.04

目前已有一個SignalR的Hub：SmartCutHub.cs

可以看到只有紅圈函數(shù)GenerateVideoScript()接收一個強類型的參數(shù)：GenerateVideoScriptDto

ps：強類型參數(shù)傳參時跟webapi一樣用json對象即可；

Program.cs注冊：

app.MapHub<SmartCutHub>("/ws/smartcut");
    
//所以路由是
ws://localhost:5055/ws/smartcut

小程序端

創(chuàng)建連接

這里代碼是用的微信小程序原生api，請參考文檔

var wsUrl = "ws://localhost:5055/ws/smartcut";

//創(chuàng)建連接
var conn= await wx.connectSocket({
    url: wsUrl,
    fail(err)
    {
        console.error(err)
    },
    success()
    {
        console.info(wsUrl+"鏈接成功")
    }
})

//創(chuàng)建連接成功
this.connection=conn;
let that=this;

發(fā)送消息

這里的步驟不能省略

conn.onOpen(function (res)
{
    console.log("SocketOpened");

    //先要確認協(xié)議，版本
    that.sendStrMsg("{\"protocol\":\"json\",\"version\":1}");
    //確認類型
    that.sendStrMsg("{\"type\":6}");
    
    //再發(fā)送消息內(nèi)容
    that.sendStrMsg("{\"arguments\":[{\"scriptType\":\"口播類\",\"productName\":\"許愿池的王八\",\"productSpecialty\":\"在水里，愛許愿，曬太陽\",\"sceneCount\":5,\"sceneMini\":5,\"sceneMax\":10,\"remark\":\"\",\"language\":\"zh\",\"generateCount\":10}],\"invocationId\":\"0\",\"target\":\"GenerateVideoScript\",\"type\":1}");
})

發(fā)送消息函數(shù)

//這里發(fā)送字符串到服務(wù)端
sendStrMsg(msg)
{
	//連接成功后就示例好了
    if(this.connection)
    {
        console.info("準備發(fā)送："+msg);
        this.connection.send({
            data: msg+"", //注意，msg這里后面這個特殊的字符不能省略
            fail(err)
            {
                console.error(err)
            },
            success(res)
            {
                console.info(res)
            },
            complete(res)
            {
                console.info(res)
            }
        });
    }
    else
    {
        console.error("ws連接不存在");
    }
}

總結(jié)

我其實這里這種方式是模擬瀏覽器端的Websocket傳輸過程的：

注意這里消息體后面一樣有這個特殊字符的

也不算原創(chuàng)和多有技術(shù)含量，可能大家早就理清楚搞定了。但只有能幫到一位朋友我就開心了。ok，今天就水到這。