微信小程序如何使用原生Websocket与Asp.Net Core SignalR 通信

情债

背景

如题，这可能算是.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注册：

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

复制代码

小程序端

创建连接
这里代码是用的微信小程序原生api，请参考文档

1. var wsUrl = "ws://localhost:5055/ws/smartcut";
3. //创建连接
4. var conn= await wx.connectSocket({
5.     url: wsUrl,
6.     fail(err)
7.     {
8.         console.error(err)
9.     },
10.     success()
11.     {
12.         console.info(wsUrl+"链接成功")
13.     }
14. })
16. //创建连接成功
17. this.connection=conn;
18. let that=this;

复制代码

发送消息
这里的步骤不能省略

1. conn.onOpen(function (res)
2. {
3.     console.log("SocketOpened");
5.     //先要确认协议，版本
6.     that.sendStrMsg("{"protocol":"json","version":1}");
7.     //确认类型
8.     that.sendStrMsg("{"type":6}");
9.    
10.     //再发送消息内容
11.     that.sendStrMsg("{"arguments":[{"scriptType":"口播类","productName":"许愿池的王八","productSpecialty":"在水里，爱许愿，晒太阳","sceneCount":5,"sceneMini":5,"sceneMax":10,"remark":"","language":"zh","generateCount":10}],"invocationId":"0","target":"GenerateVideoScript","type":1}");
12. })

复制代码

发送消息函数

1. //这里发送字符串到服务端
2. sendStrMsg(msg)
3. {
4.         //连接成功后就示例好了
5.     if(this.connection)
6.     {
7.         console.info("准备发送："+msg);
8.         this.connection.send({
9.             data: msg+"", //注意，msg这里后面这个特殊的字符不能省略
10.             fail(err)
11.             {
12.                 console.error(err)
13.             },
14.             success(res)
15.             {
16.                 console.info(res)
17.             },
18.             complete(res)
19.             {
20.                 console.info(res)
21.             }
22.         });
23.     }
24.     else
25.     {
26.         console.error("ws连接不存在");
27.     }
28. }

复制代码

总结

我其实这里这种方式是模拟浏览器端的Websocket传输过程的：

注意这里消息体后面一样有这个特殊字符的

也不算原创和多有技术含量，可能大家早就理清楚搞定了。但只有能帮到一位朋友我就开心了。ok，今天就水到这。

来源:https://www.cnblogs.com/xiaxiaolu/archive/2023/06/15/17481750.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！