ASP.NET Core在支付宝小程序中使用signalR

Github有一个经过重写的微信小程序SignalR的js类库

https://github.com/liangshiw/SignalRMiniProgram-Client

于是我把他改成支付宝小程序的版本,上面这个项目的核心代码基本没有变,只是小程序开放接口改了一下,在支付宝小程序就能跑起来了

把下面的js代码复制到你的支付宝小程序即可(使用方法在下面):

【代码】

  1 const protocal = {
  2   protocol: "json",
  3   version: 1
  4 };
  5
  6 const MessageType = {
  7   /** Indicates the message is an Invocation message and implements the {@link InvocationMessage} interface. */
  8   Invocation: 1,
  9   /** Indicates the message is a StreamItem message and implements the {@link StreamItemMessage} interface. */
 10   StreamItem: 2,
 11   /** Indicates the message is a Completion message and implements the {@link CompletionMessage} interface. */
 12   Completion: 3,
 13   /** Indicates the message is a Stream Invocation message and implements the {@link StreamInvocationMessage} interface. */
 14   StreamInvocation: 4,
 15   /** Indicates the message is a Cancel Invocation message and implements the {@link CancelInvocationMessage} interface. */
 16   CancelInvocation: 5,
 17   /** Indicates the message is a Ping message and implements the {@link PingMessage} interface. */
 18   Ping: 6,
 19   /** Indicates the message is a Close message and implements the {@link CloseMessage} interface. */
 20   Close: 7,
 21 }
 22
 23
 24 export class HubConnection {
 25
 26   constructor() {
 27     this.openStatus = false;
 28     this.methods = {};
 29     this.negotiateResponse = {};
 30     this.url = "";
 31     this.invocationId = 0;
 32     this.callbacks = {};
 33   }
 34
 35   start(url, queryString) {
 36     var negotiateUrl = url + "/negotiate";
 37     if (queryString) {
 38       for (var query in queryString) {
 39         negotiateUrl += (negotiateUrl.indexOf("?") < 0 ? "?" : "&") + (`${query}=` + encodeURIComponent(queryString[query]));
 40       }
 41     }
 42     my.request({
 43       url: negotiateUrl,
 44       method: "POST",
 45       success: (res) => {
 46         this.negotiateResponse = res.data;
 47         this.startSocket(negotiateUrl.replace("/negotiate", ""));
 48       },
 49       fail: (res) => {
 50         console.error(`requrst ${url} error : ${res}`);
 51       }
 52     });
 53   }
 54
 55   startSocket(url) {
 56     url += (url.indexOf("?") < 0 ? "?" : "&") + ("id=" + this.negotiateResponse.connectionId);
 57     url = url.replace(/^http/, "ws");
 58     this.url = url;
 59     if (this.openStatus) {
 60       return;
 61     }
 62
 63     console.log(url);
 64
 65     my.connectSocket({
 66       url: url
 67     })
 68
 69     my.onSocketOpen(res => {
 70       console.log(`websocket connectioned to ${this.url}`);
 71       this.sendData(protocal);
 72       this.openStatus = true;
 73       this.onOpen(res);
 74     });
 75
 76     my.onSocketClose(res => {
 77       console.log(`websocket disconnection`);
 78       this.openStatus = false;
 79       this.onClose(res);
 80     });
 81
 82     my.onSocketError(res => {
 83       console.error(`websocket error msg: ${res}`);
 84       this.close({
 85         reason: res
 86       });
 87       this.onError(res)
 88     });
 89
 90     my.onSocketMessage(res => this.receive(res));
 91   }
 92
 93   on(method, fun) {
 94
 95     let methodName = method.toLowerCase();
 96     if (this.methods[methodName]) {
 97       this.methods[methodName].push(fun);
 98     } else {
 99       this.methods[methodName] = [fun];
100     }
101   }
102
103   onOpen(data) { }
104
105   onClose(msg) { }
106
107   onError(msg) { }
108
109   close(data) {
110     if (data) {
111       console.error(‘closed socket: ‘ + data.reason);
112     }
113
114     my.closeSocket();
115
116     this.openStatus = false;
117   }
118
119   sendData(data, success, fail, complete) {
120     my.sendSocketMessage({
121       data: JSON.stringify(data) + "", //
122       success: success,
123       fail: fail,
124       complete: complete
125     });
126   }
127
128
129   receive(data) {
130     if (data.data.length > 3) {
131       data.data = data.data.replace(‘{}‘, "")
132     }
133
134     var messageDataList = data.data.split("");
135
136     //循环处理服务端信息
137     for (let serverMsg of messageDataList) {
138       if (serverMsg) {
139         var messageData = serverMsg.replace(new RegExp("", "gm"), "")
140         var message = JSON.parse(messageData);
141
142         switch (message.type) {
143           case MessageType.Invocation:
144             this.invokeClientMethod(message);
145             break;
146           case MessageType.StreamItem:
147             break;
148           case MessageType.Completion:
149             var callback = this.callbacks[message.invocationId];
150             if (callback != null) {
151               delete this.callbacks[message.invocationId];
152               callback(message);
153             }
154             break;
155           case MessageType.Ping:
156             // Don‘t care about pings
157             break;
158           case MessageType.Close:
159             console.log("Close message received from server.");
160             this.close({
161               reason: "Server returned an error on close"
162             });
163             break;
164           default:
165             console.warn("Invalid message type: " + message.type);
166         }
167       }
168     }
169   }
170
171   send(functionName) {
172     var args = [];
173     for (var _i = 1; _i < arguments.length; _i++) {
174       args[_i - 1] = arguments[_i];
175     }
176
177     this.sendData({
178       target: functionName,
179       arguments: args,
180       type: MessageType.Invocation,
181       invocationId: this.invocationId.toString()
182     });
183     this.invocationId++;
184   }
185
186   invoke(functionName) {
187     var args = [];
188     for (var _i = 1; _i < arguments.length; _i++) {
189       args[_i - 1] = arguments[_i];
190     }
191
192     var _this = this;
193     var id = this.invocationId;
194     var p = new Promise(function(resolve, reject) {
195
196       _this.callbacks[id] = function(message) {
197         if (message.error) {
198           reject(new Error(message.error));
199         } else {
200           resolve(message.result);
201         }
202       }
203
204       _this.sendData({
205         target: functionName,
206         arguments: args,
207         type: MessageType.Invocation,
208         invocationId: _this.invocationId.toString()
209       }, null, function(e) {
210         reject(e);
211       });
212
213     });
214     this.invocationId++;
215     return p;
216   }
217
218   invokeClientMethod(message) {
219     var methods = this.methods[message.target.toLowerCase()];
220     if (methods) {
221       methods.forEach(m => m.apply(this, message.arguments));
222       if (message.invocationId) {
223         // This is not supported in v1. So we return an error to avoid blocking the server waiting for the response.
224         var errormsg = "Server requested a response, which is not supported in this version of the client.";
225         console.error(errormsg);
226         this.close({
227           reason: errormsg
228         });
229       }
230     } else {
231       console.warn(`No client method with the name ‘${message.target}‘ found.`);
232     }
233   }
234 }

【使用方法】

const hub = require(‘../../utils/signalr.js‘);

const connection = new hub.HubConnection();

//注意:这里的apiHost不是wss或ws,是https或http
connection.start(`${apiHost}/yourHub`, { access_token: ‘如果有token则填写‘ });

connection.onOpen = res => {
    my.showToast({
         content: ‘成功开启连接‘
     });
}

connection.on(‘服务器的回调方法‘, (errorCode) => {
      my.showToast({
           content: errorCode
       });
        console.log(errorCode);
});

connection.send(‘Hub中的方法‘, ‘参数1‘, ‘参数2‘);

原文地址:https://www.cnblogs.com/myhalo/p/11191988.html

时间: 2024-11-05 18:47:44

ASP.NET Core在支付宝小程序中使用signalR的相关文章

支付宝小程序PHP全栈开发--前端样式的设计.acss样式详解

关于.acss文件 在视频中已经说过了,小程序的设计思想和原生app的设计思想颇为相似,基本的应用单元为页面.当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的.我们知道在web开发中样式是在css文件中规定的,叫做层叠样式表 (Cascading Style Sheets).其实在APP中样式的约束也是使用css,在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已. CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化

支付宝小程序开发之与微信小程序不同的地方

前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段改成了status. 用户授权登录: 1. 登录: wx.login ====  my.getAuthCode wx.checkSession ==== 无(需后端接口验证) 缓存: 以常用的 wx.getStorageSync() 为例,先看微信的代码: wx.setStorageSync("id

【支付宝小程序】 rich-text的应用

问题描述:在支付宝小程序中,rich-text的nodes 属性只支持使用 Array 类型,如果需要支持 HTML String,则需要自己将 HTML String 转化为 nodes 数组 解决方案:使用mini-html-parser2 代码样例: index.axml <rich-text type="text" nodes="{{htmlData}}"></rich-text> index.js import parse from

【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布.我一直在想,怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目.经过不懈的研究.终于的得到了一套很好的解决方案与大家分享. 文章转载请著名出处:http://www.cnblogs.com/smallprogram 我们的目的 随着Web技术的快速发展,新的技术层出

在docker中运行ASP.NET Core Web API应用程序

本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Core以及docker的基本概念,网上已经有很多文章对其进行介绍了,因此本文不会再详细讲解这些内容.对.NET Core和docker不了解的朋友,建议首先查阅与这些技术相关的文档,然后再阅读本文. 先决条件 要完成本文所介绍的演练任务,需要准备以下环境: Visual Studio 2015,或者Vi

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 效果: 私有及群发消息

支付宝小程序注意事项

1.支付宝小程序和微信小程序的开发流程及逻辑代码几乎相同,它的开发者工具名称由蚂 蚁金服而来,其文件组成由js,json,acss,axml组成. 2.支付宝小程序在生命周期函数中多了个onTitleClick函数(标题被点击时). 3.视图层和微信小程序的视图层数据的渲染区别在于,支付宝是以a:开头,而微信是以wx: 开头. **```4.其中点击事件是以onTap或catchTap进行绑定,它们的区别在于on 事件绑定不会阻止 冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡*

支付宝小程序狂欢月来了,怎么玩?商家如何抢占红利?

读完本文仅需3分钟:1.支付宝小程序狂欢月怎么玩:2.支付宝小程序前景优势解读. 前天,支付宝APP内悄然上线小程序狂欢月活动,通过多种方式推广小程序,再次让开发者看到了支付宝发力小程序的决心,下面就一起来看看支付宝小程序狂欢月怎么玩,以及当前前景如何: 一.支付宝小程序狂欢月怎么玩? 活动于前天上线后,用户通过首页下拉小程序收藏或发现页入口,可进入狂欢月活动,活动一共分为四轮:玩乐周.祖祖乐.踏青出游周和乐享生活周,分别推广不同类型的小程序. 具体的参与方式则是通过玩"叠叠乐"小游戏

ASP.NET Core在Azure Kubernetes Service中的部署和管理

目录 ASP.NET Core在Azure Kubernetes Service中的部署和管理 目标 准备工作 注册 Azure 账户 AKS文档 进入Azure门户(控制台) 安装 Azure Cli 安装 Docker 进入正题 资源组 创建资源组 删除资源组 容器注册表 Azure Container Register (ACR) 创建 ACR 登录 ACR 服务主体 service principle 创建服务主体 给服务主体配置 ACR 的pull权限 K8s服务集群 Azure Ku