欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

asp.net core 使用 signalR(二)

程序员文章站 2022-06-21 20:28:16
asp.net core 使用 signalR(二) Intro 上次介绍了 asp.net core 中使用 signalR 服务端的开发,这次总结一下web前端如何接入和使用 signalR,本文主要分两部分,一是直接使用 这个微软开发好的 signalR 的客户端,另一部分是使用 h5 原生的 ......

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