# 背景 如題,這可能算是.net 做小程式的服務端時,繞不開的一個問題,老生常談了。同樣的問題,我記得我2018/19年的一個項目的解決方案是: **修改官方的SignalR.js的客戶端**:把裡面用到瀏覽器的Websocket改成微信小程式的官方api的。目前網上也有不少這樣的方案,已經改好開 ...
背景
如題,這可能算是.net 做小程式的服務端時,繞不開的一個問題,老生常談了。同樣的問題,我記得我2018/19年的一個項目的解決方案是:
修改官方的SignalR.js的客戶端:把裡面用到瀏覽器的Websocket改成微信小程式的官方api的。目前網上也有不少這樣的方案,已經改好開源了;這種方案的缺點是可能有一段時間了,可能跟目前自己的服務端版本不相容,跟目前自己微信小程式的運行環境不相容。或者已經有些隱藏bug等等,用上寫好業務了再發現bug頭疼得很。使用起來很沒有安全感;
我現在這裡的方案是:
直接使用微信小程式的Websocket的原生api與服務端通信;
原生api文檔:https://developers.weixin.qq.com/minigame/dev/api/network/websocket/wx.connectSocket.html
服務端
運行環境:.net core 6 On Linux(k8s)ubuntu 18.04
目前已有一個SignalR的Hub:SmartCutHub.cs
可以看到只有紅圈函數GenerateVideoScript()
接收一個強類型的參數:GenerateVideoScriptDto
ps:強類型參數傳參時跟webapi一樣用json對象即可;
Program.cs註冊:
app.MapHub<SmartCutHub>("/ws/smartcut");
//所以路由是
ws://localhost:5055/ws/smartcut
小程式端
創建連接
這裡代碼是用的微信小程式原生api,請參考文檔
var wsUrl = "ws://localhost:5055/ws/smartcut";
//創建連接
var conn= await wx.connectSocket({
url: wsUrl,
fail(err)
{
console.error(err)
},
success()
{
console.info(wsUrl+"鏈接成功")
}
})
//創建連接成功
this.connection=conn;
let that=this;
發送消息
這裡的步驟不能省略
conn.onOpen(function (res)
{
console.log("SocketOpened");
//先要確認協議,版本
that.sendStrMsg("{\"protocol\":\"json\",\"version\":1}");
//確認類型
that.sendStrMsg("{\"type\":6}");
//再發送消息內容
that.sendStrMsg("{\"arguments\":[{\"scriptType\":\"口播類\",\"productName\":\"許願池的王八\",\"productSpecialty\":\"在水裡,愛許願,曬太陽\",\"sceneCount\":5,\"sceneMini\":5,\"sceneMax\":10,\"remark\":\"\",\"language\":\"zh\",\"generateCount\":10}],\"invocationId\":\"0\",\"target\":\"GenerateVideoScript\",\"type\":1}");
})
發送消息函數
//這裡發送字元串到服務端
sendStrMsg(msg)
{
//連接成功後就示例好了
if(this.connection)
{
console.info("準備發送:"+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連接不存在");
}
}
總結
我其實這裡這種方式是模擬瀏覽器端的Websocket傳輸過程的:
註意這裡消息體後面一樣有這個特殊字元的
也不算原創和多有技術含量,可能大家早就理清楚搞定了。但只要能幫到一位朋友我就開心了。ok,今天就水到這。