asp.net core 使用 signalR(二)

Intro

上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文主要分两部分,一是直接使用 @aspnet/signalr 这个微软开发好的 signalR 的客户端,另一部分是使用 h5 原生的 websocket 直接连接 signalR 的 websocket

使用 signalR 客户端

  1. 安装 signalr 客户端 npm 包 npm install @aspnet/signalr --save

  2. 获取一个 connection


    import * as signalR from "@aspnet/signalr";
    // ...
    const connection = new signalR.HubConnectionBuilder()
    .withUrl(Constants.HubUrl, { accessTokenFactory: () => Constants.TestToken })
    .build(); // accessTokenFactory 用于指定获取 accessToken 的方式,如果不需要用户登录,不需要认证没有这个配置
  3. 添加客户端处理方法

    connection.on("GameAnswerResultReceived", (result:any)=>{
    showMessage(`收到问题:${result.QuestionId} 答案`, JSON.stringify(result));
    }); connection.on("GameOver", (result: object)=>{
    showMessage(`游戏结束`, `Game Over\n ${JSON.stringify(result)}`);
    });
  4. 客户端调用服务器端方法

    1. 调用服务器端方法,没有返回值

      connection.send("CheckQuestionAnswer", {
      QuestionId: questionId,
      Answer: tbMessage.value,
      }, gameId);
    2. 调用服务器端方法并获取返回值

       connection.invoke("CheckQuestionAnswer", {
      QuestionId: questionId,
      Answer: tbMessage.value,
      }, gameId)
      .then(result => {
      console.log(result);
      showMessage(`答案检查结果:${result.Succeeded}`, JSON.stringify(result));
      });

websocket 直接连接 signalR

  1. 创建 websocket 连接


    let connection = new WebSocket(`${Constants.HubUrl}?access_token=${Constants.TestToken}`);
  2. 连接成功后发送使用协议信息

    signalr 发送的消息均以 0x1e 这个字符结尾,在发送消息的时候需要在消息的最后增加 0x1e 字符

    connection.onopen = (event) => {
    // console.log(event);
    connection.send(`{"protocol":"json", "version":1}${String.fromCharCode(0x1e)}`);
    }

    以上代码表示我们要使用 JSON 的形式进行消息的序列化,如果有较高的性能要求也可以使用 messagePack 二进制序列化消息内容(对浏览器要求较高,需要支持 xhr2)

  3. 接受服务器端消息

    connection.onmessage = (event) => {
    var msg = event.data.replace(String.fromCharCode(0x1e), ""); //替换消息结束符
    console.log(`received message: ${msg}`);
    let eventData = JSON.parse(msg);
    if(eventData.type === 1 && eventData.target){ // type为1表示调用客户端的某一个方法
    let func: (...args:any[])=>any = callbacks[eventData.target];
    if(func !== undefined){
    func(...eventData.arguments);
    }
    }
    }
  4. 定义客户端方法


    callbacks["GameAnswerResultReceived"] = (result:any)=>{
    showMessage(`收到问题:${result.QuestionId} 答案`, JSON.stringify(result));
    }; callbacks["GameOver"] = (result)=>{
    showMessage(`游戏结束`, `Game Over\n ${JSON.stringify(result)}`);
    };
  5. 调用服务器端方法

    // 可以把这个方法扩展为 WebSocket 的一个原型方法
    function invokeMethod(webSocket: WebSocket, methodName:string, ...args: any[]) : Promise<void> {
    // type为1表示调用远程的方法(一个 RPC 调用),target为要调用的方法名称,arguments为要调用的方法的参数
    webSocket.send(`${JSON.stringify({
    arguments: args,
    target: methodName,
    type: 1,
    })}${String.fromCharCode(0x1e)}`);
    return Promise.resolve();
    }

Memo

上面的完全基于 websocket 去连接 signalr 的代码还有些简陋,实际使用的话可以再修改优化一下

强类型调用服务器端的方法,自定义的话可以在 websocket 的基础上封装一下,signalr 强类型调用服务器端方法还没找到解决办法,不过问题不大,有兴趣的话可以研究一下 signalR 源码

Reference

asp.net core 使用 signalR(二)的更多相关文章

  1. Asp.Net Core使用SignalR进行服务间调用

    网上查询过很多关于ASP.NET core使用SignalR的简单例子,但是大部分都是简易聊天功能,今天心血来潮就搞了个使用SignalR进行服务间调用的简单DEMO. 至于SignalR是什么我就不 ...

  2. asp.net core 使用 signalR(一)

    asp.net core 使用 signalR(一) Intro SignalR 是什么? ASP.NET Core SignalR 是一个开源代码库,它简化了向应用添加实时 Web 功能的过程. 实 ...

  3. Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

    目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...

  4. ASP.NET Core学习之二 菜鸟踩坑

    对于像我这样没接触过core的人,坑还是比较多的,一些基础配置和以前差别很大,这里做下记录 一.Startup 1.注册服务 // This method gets called by the run ...

  5. asp.net core 五 SignalR 负载均衡

           SignalR : Web中的实时功能实现,所谓实时功能,就是所连接的客户端变的可用时,服务端能实时的推送内容到客户端,而不是被动的等待客户端的请求.Asp.net SignalR 源码 ...

  6. ASP.NET Core 使用 SignalR 遇到的 CORS 问题

    问题 将 SignalR 集成到 ASP.NET Core MVC 程序的时候,按照官方 DEMO 配置完成,但使用 DEMO 页面建立连接一直提示如下信息. Access to XMLHttpReq ...

  7. ASP.NET Core 2.2 : 二十六. 应用JWT进行用户认证

    本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案(ASP.NET Core 系列目录) 一.什么是JWT? JWT(json web token ...

  8. ASP.NET Core 2.2 : 二十七. JWT与用户授权(细化到Action)

    上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...

  9. ASP.NET Core 2.2 : 二十. Action的多数据返回格式处理机制

    上一章讲了系统如何将客户端提交的请求数据格式化处理成我们想要的格式并绑定到对应的参数,本章讲一下它的“逆过程”,如何将请求结果按照客户端想要的格式返回去. 一.常见的返回类型 以系统模板默认生成的Ho ...

随机推荐

  1. python中下标和切片的使用

    下标 所谓下标就是编号,就好比超市中存储柜的编号,通过这个编号就能找到相应的存储空间. Python中字符串,列表,元祖均支持下标索引. 例如: # 如果想取出部分字符,可使用下标 name=&quo ...

  2. Django安装于基本介绍

    pycharm果然是最强大的python IDE,在创建Diango项目时如果没有则自动下载. 然而即使是这样,我在安装Django的时候还是比较曲折的. Django的安装方式有很多,但是因为网络问 ...

  3. Executor线程池只看这一篇就够了

    线程池为线程生命周期的开销和资源不足问题提供了解决方 案.通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上. 线程实现方式 Thread.Runnable.Callable //实现Runn ...

  4. 开源题材征集 + MVC&EF Core 完整教程小结

    到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...

  5. There’s More Than One Way To Do It!

    There’s More Than One Way To Do It!

  6. 一文了解:Redis主从复制

    Redis主从复制 主从复制 主从复制,将一台Redis服务器的数据,复制到其他Redis服务器.前者称为主(master)节点,后者称为从(slave)节点 . 在默认的情况下,Redis都是主节点 ...

  7. Oracle笔记_多表查询

    1 执行sql文件 @文件地址名 --执行某个sql文件: 2 多表查询 想要的数据不在同一张表,就需要多个表进行联查. 多表查询也叫做表连接查询,其中的where条件就是连接条件. 可以使用join ...

  8. 问题.springmvc错误.415:Unsupported Media Type

    场景是在希望用ajax发post请求,传递一个json对象,在controller中直接使用java对象接收时遇到的,具体错误信息如下: { "timestamp": 150027 ...

  9. 骑士精神(IDA*)

    题目描述 输入格式 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1表示黑色骑士,*表示空位.两组数据之间没有空行. 输出格式 对于每组数据都 ...

  10. CF EDU 1101D GCD Counting 树形DP + 质因子分解

    CF EDU 1101D GCD Counting 题意 有一颗树,每个节点有一个值,问树上最长链的长度,要求链上的每个节点的GCD值大于1. 思路 由于每个数的质因子很少,题目的数据200000&l ...