1. 首页
  2. 热点资讯

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

  本文将引见如安在 .NET Core 环境下,借助 SignalR 在小顺序内运用 WebSocket。关于 WebSocket 和 SignalR 的基本理论知识不在这里睁开,已有充足的参考资料,比方参考 SignalR 的官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-2.1

  我们先看一下完本钱教程内容后,在小顺序内完成的 WebSocket 结果:

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

私有及群发音讯

 

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

小顺序模板音讯

 

  上图中包含了只要发送者本人可以收到的音讯,以及群发的音讯,另有一条发送者本人收到的模板音讯。

  一切代码都已开源,可以在  https://github.com/JeffreySu/WeiXinMPSDK 中找到,个中服务器端代码位于 /Samples/Senparc.Weixin.MP.Sample.vs2017/Senparc.Weixin.MP.Sample.vs2017.sln 处理方案中,小顺序客户端代码位于 /src/Senparc.Weixin.WxOpen/src/Senparc.Weixin.WxOpen.AppDemo 中。

  下面让我们最先吧!

  

服务器端

  起首,我们须要经由历程 nuget 装置 Separc.WebSocket 包:https://www.nuget.org/packages/Senparc.WebSocket。Senparc.WebSocket 包供应了可供小顺序运用的 WebScoket 的基本功用封装(固然,它也可以被很好地运用在小顺序之外的场景,只不过在其他场景中我们一般有更多的挑选,以及更多的庞杂的营业需求)。

       注重:Senparc.WebSocket 供应了针对 .NET Framework 4.5 和 .NET Standard 2.0(支撑 .NET Core)的两个版本。个中,前者运用了相对比较底层的 WebSocket 构建体式格局,而后者我们直接运用了 SignalR,因为 .NET Core 下的 SignalR 官方摆脱了对 jQuery 的依靠,而 jQuery 在微信小顺序中是不被支撑的,这也是为何我们没有在 .NET Framework 4.5 中没有运用 SignalR 这个优异组件的缘由。

       装置终了 Senparc.WebSocket 以后,我们还须要在 startup.cs 中对其举行启用,如在 ConfigureServices() 要领中增添代码:

services.AddSenparcWebSocket<CustomNetCoreWebSocketMessageHandler>();//Senparc.WebSocket 注册(按需)

  注重:上述历程会附带实行 services.AddSignalR(); 指令,因而假如你在体系的其他地方也须要运用 SIgnalR,那末可以疏忽对其注册历程。

  关于上述要领中的泛型 CustomNetCoreWebSocketMessageHandler,其逻辑类似于民众号的 CustomMessageHandler,用于对音讯举行统一的处置惩罚。让我们来看一下 CustomNetCoreWebSocketMessageHandler.cs的模样:


 1 using System;
 2 using System.Linq;
 3 using System.Threading.Tasks;
 4 using Senparc.WebSocket;
 5 using Senparc.Weixin.MP.AdvancedAPIs.TemplateMessage;
 6 using Senparc.Weixin.WxOpen.Containers;
 7 
 8 namespace Senparc.Weixin.MP.Sample.CommonService.MessageHandlers.WebSocket
 9 {
10     /// <summary>
11     /// .NET Core 自定义 WebSocket 处置惩罚类
12     /// </summary>
13     public class CustomNetCoreWebSocketMessageHandler : WebSocketMessageHandler
14     {
15         public override Task OnConnecting(WebSocketHelper webSocketHandler)
16         {
17             //TODO:处置惩罚衔接时的逻辑
18             return base.OnConnecting(webSocketHandler);
19         }
20 
21         public override Task OnDisConnected(WebSocketHelper webSocketHandler)
22         {
23             //TODO:处置惩罚断开衔接时的逻辑
24             return base.OnDisConnected(webSocketHandler);
25         }
26 
27 
28         public override async Task OnMessageReceiced(WebSocketHelper webSocketHandler, ReceivedMessage receivedMessage, string originalData)
29         {
30             if (receivedMessage == null || string.IsNullOrEmpty(receivedMessage.Message))
31             {
32                 return;
33             }
34 
35             var message = receivedMessage.Message;
36 
37             await webSocketHandler.SendMessage("originalData:" + originalData, webSocketHandler.WebSocket.Clients.Caller);
38             await webSocketHandler.SendMessage("您发送了笔墨:" + message, webSocketHandler.WebSocket.Clients.Caller);
39             await webSocketHandler.SendMessage("正在处置惩罚中(反转笔墨)...", webSocketHandler.WebSocket.Clients.Caller);
40 
41             await Task.Delay(1000);
42 
43             //处置惩罚笔墨
44             var result = string.Concat(message.Reverse());
45             await webSocketHandler.SendMessage(result, webSocketHandler.WebSocket.Clients.Caller);
46 
47             var appId = Config.SenparcWeixinSetting.WxOpenAppId;//与微信小顺序账号背景的AppId设置保持一致,辨别大小写。
48 
49             try
50             {
51             
52                 var sessionBag = SessionContainer.GetSession(receivedMessage.SessionId);
53 
54                 //暂时演示运用牢固openId
55                 var openId = sessionBag != null ? sessionBag.OpenId : "onh7q0DGM1dctSDbdByIHvX4imxA";// "用户未准确上岸";
56 
57                 //await webSocketHandler.SendMessage("OpenId:" + openId, webSocketHandler.WebSocket.Clients.Caller);
58                 //await webSocketHandler.SendMessage("FormId:" + formId);
59 
60                 //群发
61                 await webSocketHandler.SendMessage($"[群发音讯] [来自 OpenId:***{openId.Substring(openId.Length - 10, 10)},昵称:{sessionBag.DecodedUserInfo?.nickName}]:{message}", webSocketHandler.WebSocket.Clients.All);
62 
63                 //发送模板音讯
64 
65                 //var data = new WxOpenTemplateMessage_PaySuccessNotice(
66                 //    "在线购置", SystemTime.Now, "图书众筹", "1234567890",
67                 //    100, "400-9939-858", "http://sdk.senparc.weixin.com");
68 
69                 var formId = receivedMessage.FormId;//发送模板音讯运用,须要在wxml中设置<form report-submit="true">
70 
71                 var data = new
72                 {
73                     keyword1 = new TemplateDataItem("来自小顺序WebSocket的模板音讯(测试数据)"),
74                     keyword2 = new TemplateDataItem(SystemTime.Now.LocalDateTime.ToString()),
75                     keyword3 = new TemplateDataItem($"来自 Senparc.Weixin SDK 小顺序 .Net Core WebSocket 触发\r\n您适才发送了笔墨:{message}"),
76                     keyword4 = new TemplateDataItem(SystemTime.NowTicks.ToString()),
77                     keyword5 = new TemplateDataItem(100.ToString("C")),
78                     keyword6 = new TemplateDataItem("400-031-8816"),
79                 };
80 
81                 var tmResult = Senparc.Weixin.WxOpen.AdvancedAPIs.Template.TemplateApi.SendTemplateMessage(appId, openId, "Ap1S3tRvsB8BXsWkiILLz93nhe7S8IgAipZDfygy9Bg", data, receivedMessage.FormId, "pages/websocket/websocket", "websocket",
82                          null);
83             }
84             catch (Exception ex)
85             {
86                 var msg = ex.Message + "\r\n\r\n" + originalData + "\r\n\r\nAPPID:" + appId;
87 
88                 await webSocketHandler.SendMessage(msg, webSocketHandler.WebSocket.Clients.Caller); //VS2017以下假如编译不经由历程,可以解释掉这一行
89 
90                 WeixinTrace.SendCustomLog("WebSocket OnMessageReceiced()历程失足", msg);
91             }
92         }
93     }
94 }

View Code

  从上述代码啊可以看到,CustomNetCoreWebSocketMessageHandler 继续了来自 Senparc.WebSocket 的 WebSocketMessageHandler 抽象类,完成了 3 个主要的要领:

  •     OnConnecting()
  •     OnDisConnected()
  •     OnMessageReceiced()

 

  个中最主要的就是 OnMessageReceiced() 要领,用于处置惩罚来自于小顺序的 WebSocket 音讯(注重:这条音讯在小顺序中经过了特别商定的处置惩罚,才抵达此处,并被准确读取,在本文背面将会引见)。

  上述要领中,实行了以下逻辑:

  1. 读取音讯
  2. 向用户的客户端立即发送三条音讯(originalData……、您发送了笔墨……、正在处置惩罚中(反转笔墨)…),本条音讯只要发送者可以收到(注重运用了webSocketHandler.WebSocket.Clients.Caller)
  3. 对用户发送的音讯字符串举行处置惩罚,使其反转
  4. 将处置惩罚结果发送给操作人的客户端(Caller)
  5. 线程休眠 1 秒钟(模仿长时间的体系实行)
  6. 向一切已衔接的客户端群发音讯(包含发送者本人在内):[群发音讯] [来自 OpenId:***…… (注重运用了webSocketHandler.WebSocket.Clients.All)
  7. 猎取 formId,并运用猎取到的 formId 发送模板音讯

 

  上述历程当中,一共发送了 5 条 WebSocket 音讯,个中 4 条只要发送者本人可以收到,1 条一切人(包含发送者本人)可以收到,除此之外,还发送了一条模板音讯。

  我们可以运用 SignalR 的优异特征,有针对性地举行定向发送或分组发送,相干知识点可以参考官方教程,这里不再睁开。

  

  接下来,我们须要在 Startup.cs 对 SignalR 增添一个 Hub 的路由划定规矩,在  Configure() 要领中增添:

            //运用 SignalR
            app.UseSignalR(routes =>
            {
                routes.MapHub<SenparcHub>("/senparcHub");
            });

  依据 SignalR 的定义,”/senparcHub” 是我们自定义的 Hub 的衔接地点,和类的定名没有关联。泛型 SenparcHub 是我们自定义的 SignalR 类,代码以下:

以Spring Cache扩展为例介绍如何进行高效的源码的阅读

using Senparc.WebSocket.SignalR;

namespace Senparc.Weixin.MP.CoreSample.WebSocket.Hubs
{
    public class SenparcHub : SenparcWebSocketHubBase
    {

    }
}

  注重:和通例的 SignalR 的 Hub 自定义类直接继续 Microsoft.AspNetCore.SignalR.Hub 类差别,这里继续了 SenparcWebSocketHubBase,由 SenparcWebSocketHubBase 继续了 Microsoft.AspNetCore.SignalR.Hub 类,SenparcWebSocketHubBase 为自动处置惩罚小顺序音讯举行了一系列的逻辑处置惩罚。因而,SenparcHub 也具有了一切  Microsoft.AspNetCore.SignalR.Hub 的才能,我们也可以用于通例的网页 WebSocket 通信。

  下面我们来雄厚一下这个类:

using Microsoft.AspNetCore.SignalR;
using Senparc.WebSocket.SignalR;
using System.Threading.Tasks;

namespace Senparc.Weixin.MP.CoreSample.WebSocket.Hubs
{
    public class SenparcHub : SenparcWebSocketHubBase
    {
        /// <summary>
        /// 给一般网页用的自定义扩大要领 /WebScoket
        /// </summary>
        /// <param name="user"></param>
        /// <param name="message"></param>
        /// <returns></returns>
        public async Task SendCustomMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveCustomMessage", user, message);
        }
    }
}

  这里所增添的 SendCustomMessage 就是给一般网页用的,可以参考官方教程:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-2.1&tabs=visual-studio,关于页面上的代码以及js文件的开辟不再赘述。

  可以翻开网页 https://sdk.weixin.senparc.com/WebSocket 举行测试,结果以下:

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

 

  关于 Web 端的 WebSocket 不是本文的重点,这里不再睁开,下面看小顺序的客户端中怎样处置惩罚。

 

小顺序客户端

  第一步,建立或翻开小顺序客户端项目,如图:

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

  第二步:在 utils 文件夹中到场到场两个文件:

  1. signalr.1.0.js 文件(https://github.com/JeffreySu/WeiXinMPSDK/blob/Developer/src/Senparc.Weixin.WxOpen/src/Senparc.Weixin.WxOpen.AppDemo/utils/signalr.1.0.js
  2. senparc.websocket.js 文件(https://github.com/JeffreySu/WeiXinMPSDK/blob/Developer/src/Senparc.Weixin.WxOpen/src/Senparc.Weixin.WxOpen.AppDemo/utils/senparc.websocket.js

  注重:signalr.js 文件还在测试中,现在请勿运用!虽然这里的 signalr.1.0.js 运用的并不是最新的版本的 js 客户端文件,不过至今为止依然支撑最新的 SignalR nuget 包,可以放心运用。

  特别感谢 LcFireRabbit 供应的修正后的 signalr.js 文件!假如关于新版本 js 您有更好的处理方案,也迎接留言交换!

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

 

 

  第三步:建立测试页面,见 websocket_signalr 文件夹:

Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

 

  因为源代码都已供应,这里不再睁开,引见一下和 WebSocket 通信相干的中心代码,在 websocket_signalr.js 中:


 1 var signalR = require("../../utils/signalr.1.0.js")
 2 var senparcWebsocket = require("../../utils/senparc.websocket.js")
 3 
 4 var connection;// Signalr 衔接
 5 var app = getApp()
 6 var socketOpen = false;//WebSocket 翻开状况
 7 Page({
 8   data: {
 9     messageTip: '正在衔接中,请守候...',
10     messageTextArr: [],
11     messageContent: 'TEST',
12     userinfo: {}
13   },
14   //sendMessage
15   formSubmit: function (e) {
16     var that = this;
17     console.log('formSubmit', e);
18     if (socketOpen) {
19       var text = e.detail.value.messageContent;//必填,取得输入笔墨
20       var sessionId = wx.getStorageSync("sessionId");//选填,不须要可输入''
21       var formId = e.detail.formId//选填formId用于发送模板音讯,不须要可输入''
22       senparcWebsocket.sendMessage(text,sessionId,formId);//发送 websocket 要求
23 
24       that.setData({
25         messageContent: ''
26       })
27     } else {
28       that.setData({
29         messageTip: 'WebSocket 链接失利,请从新衔接!'
30       })
31     }
32   },
33   onLoad: function () {
34     console.log('onLoad')
35   },
36   onShow:function(){
37     console.log('onShow');
38 
39     var that = this;
40     var hubUrl = wx.getStorageSync('wssDomainName') + "/SenparcHub";//Hub Url
41     var onStart = function () {
42       console.log('ws started');
43       socketOpen = true;
44       that.setData({
45         messageTip: 'WebSocket 衔接胜利!'
46       })
47     };
48     connection = senparcWebsocket.buildConnectionAndStart(hubUrl, signalR, onStart);
49 
50     //定义收到音讯后触发的事宜
51     var onReceive = function (res) {
52       console.log('收到服务器内容:' + res)
53       var jsonResult = JSON.parse(res);
54       var currentIndex = that.data.messageTextArr.length + 1;
55       var newArr = that.data.messageTextArr;
56       newArr.unshift(
57         {
58           index: currentIndex,
59           content: jsonResult.content,
60           time: jsonResult.time
61         });
62       console.log(that);
63       that.setData({
64         messageTextArr: newArr
65       });
66     };
67     senparcWebsocket.onReceiveMessage(onReceive);
68 
69     //WebSocket 衔接胜利
70     wx.onSocketOpen(function (res) {
71       console.log('WebSocket 衔接胜利!')
72       
73     })
74     //WebSocket 已封闭
75     wx.onSocketClose(function (res) {
76       console.log('WebSocket 已封闭!')
77       socketOpen = false;
78     })
79     //WebSocket 翻开失利
80     wx.onSocketError(function (res) {
81       console.log('WebSocket衔接翻开失利,请搜检!')
82     })
83   }
84 })

View Code

  个中:

  • 第 1 行引入之前建立的 signalr.1.0.js 文件。
  • 第 2 行引入之前建立的 senparc.websocket.js 文件。
  • 第 15 行由点击了界面上的【发送】按钮以后,触发提交form表单的事宜(不运用form也可以,只是没法猎取到formId,并用于发送模板音讯)。
  • 第 19-21行预备了 3 个参数:text、sessionId、formId
  • 第 22 行运用封装好的 senparcWebsocket 举行 WebSocket 音讯发送, Senparc.WebScoket 的要领内部可以自动处置惩罚的花样,必需严厉按照此花样设置,可以经由历程修正 senparc.websocket.js 增添属性,然则现在已供应的属性不能削减(FormId 假如没有可以留空)。
  • 第 36 行最先,我们把 websocket 的衔接和设置代码放在了 onShow() 事宜中,而不是 onLoad(),如许可以确保用户每次回到此页面都可以准确取得衔接。固然为了节约开支,我们也可以在 onLoad() 中启动衔接,并在 onShow() 中对衔接状况举行推断,这里是简化的做法。
  • 第 40 行,设置 SenparcHub 的衔接地点。
  • 第 41-47 行,设置衔接胜利后的事宜代码。
  • 第 48 行,正式启动 WebSocket 衔接。
  • 第 51-67 行,设置收到 WebSocket 音讯后的触发事宜代码。
  • 第 69-82 行,运用微信官方的接口举行衔接状况的监控。

 

  以上结果可以扫描下方二维码,受权登录后,点击【WebSocket】按钮举行体验(可开多个手机微信举行测试,但发起不要在一台上多开,微信的 websocket 限定比较多)。

 Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十一):在小顺序中运用 WebSocket (.NET Core)

  微信小顺序开辟QQ群:108830388 

 

列教程索引

地点:http://www.cnblogs.com/szw/archive/2013/05/14/weixin-course-index.html

  1. Senparc.Weixin.MP SDK 微信民众平台开辟教程(一):微信民众平台注册
  2. Senparc.Weixin.MP SDK 微信民众平台开辟教程(二):成为开辟者
  3. Senparc.Weixin.MP SDK 微信民众平台开辟教程(三):微信民众平台开辟考证
  4. Senparc.Weixin.MP SDK 微信民众平台开辟教程(四):Hello World
  5. Senparc.Weixin.MP SDK 微信民众平台开辟教程(五):运用Senparc.Weixin.MP SDK
  6. Senparc.Weixin.MP SDK 微信民众平台开辟教程(六):相识MessageHandler
  7. Senparc.Weixin.MP SDK 微信民众平台开辟教程(七):处理用户上下文(Session)题目
  8. Senparc.Weixin.MP SDK 微信民众平台开辟教程(八):通用接口申明
  9. Senparc.Weixin.MP SDK 微信民众平台开辟教程(九):自定义菜单接口申明
  10. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十):多客服接口申明
  11. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十一):高等接口申明
  12. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十二):OAuth2.0申明
  13. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十三):舆图相干接口申明
  14. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十四):要求音讯去重
  15. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十五):音讯加密
  16. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十六):AccessToken自动管理机制
  17. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十七):个性化菜单接口申明
  18. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十八):Web代办功用
  19. Senparc.Weixin.MP SDK 微信民众平台开辟教程(十九):MessageHandler 的未知范例音讯处置惩罚
  20. Senparc.Weixin.MP SDK 微信民众平台开辟教程(二十):运用菜单音讯功用

 

本文来自,经授权后发布,本文观点不代表前媒网立场,转载请联系原作者。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

0755-32904768

在线咨询:点击这里给我发消息

邮件:qianmeinet@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code