• SignalR 入门


    SignalR 介绍

    SignalR 是一个开源的实时通信库,用于构建实时、双向的应用程序。它提供了简化实时通信的功能,允许服务器主动向客户端推送数据,实现实时更新和即时通知的功能。SignalR 具有高度集成性、跨平台支持和可扩展性,适用于实时聊天、在线游戏、监控系统等各种应用场景。

    SignalR 提供了多种实时通信技术

    • WebSocket:SignalR 使用 WebSocket 作为首选的实时通信协议,WebSocket 提供了低延迟、双向通信的能力,并且在服务器和客户端之间建立持久连接,支持实时数据推送和接收。

    • Server-Sent Events(SSE):当浏览器或客户端支持 SSE 但不支持 WebSocket 时,SignalR 可以使用 Server-Sent Events 进行实时通信。SSE 是一种基于 HTTP 的单向通信协议,服务器可以主动向客户端推送事件消息。

    • Long Polling:对于不支持 WebSocket 和 SSE 的环境,SignalR 使用长轮询(Long Polling)作为备选方法。长轮询是一种模拟实时通信的技术,客户端发送请求给服务器,服务器保持请求打开并等待新数据到达时再响应。

    • 其他传输方式:除了 WebSocket、SSE 和长轮询,SignalR 还支持其他传输方式,如 Forever Frame(一个使用隐藏的 iframe 来模拟实时通信的技术)和 AJAX 短轮询(在每次请求中都进行轮询以获取最新数据)。

    通过支持多种实时通信技术,SignalR 在不同的环境中能够选择最佳的通信方式,从而实现实时、可靠的双向通信。这使得开发者可以构建适应不同网络和浏览器的实时应用程序,并提供优秀的用户体验。

    集线器 hub

    SignalR 中的集线器(Hub)是一种特殊的组件,它充当了服务器和客户端之间的中间人,用于处理实时通信的逻辑。通过使用集线器,开发人员可以简化实时通信的编程模型。

    SignalR 集线器提供以下功能:

    • 客户端与服务器之间的方法调用:在集线器中定义的方法可以由客户端调用,而客户端也可以定义方法供集线器调用。这使得服务器和客户端能够相互之间进行双向的方法调用,方便实现实时数据传输和通信。

    • 组管理:集线器支持将客户端连接分组,并对组进行管理。这样,可以将特定的客户端连接到同一个组中,以实现广播消息或针对特定组发送消息的功能。

    • 生命周期管理:集线器管理客户端连接的生命周期,可以在客户端连接建立、断开或重新连接时触发相应的事件。这些事件可以用于执行一些初始化或清理操作,以及监控连接状态。

    • 状态管理:集线器可以存储和管理与客户端连接相关的状态信息,这些信息可以在不同的方法调用之间共享。这对于跟踪和管理用户状态是很有用的,例如聊天应用程序中的在线用户列表。

    在 SignalR 中,集线器是通过继承 Hub 类来创建的。开发人员可以在集线器中定义服务器端和客户端之间的方法,并使用相应的客户端库来调用这些方法。

    SignalRDemo

    1.创建web应用

    image

    2.添加集线器hub

    public class ChatHub : Hub
    {
    	public async Task SendMessage(string user, string message)
    	{
    		await Clients.All.SendAsync("ReceiveMessage", user, message);
    	}
    }
    

    3.Program.cs 添加注入与终结点

    image

    JavaScript客户端调用

    1. 在“解决方案资源管理器”>中,右键单击项目,然后选择“添加”“客户端库”。
    2. 在“添加客户端库”对话框中,对于“提供程序”,选择“unpkg”。
    3. 对于“库”,输入 @microsoft/signalr@latest。
      image
      修改Pages/Index.cshtml
    @page
    <div class="container">
        <div class="row"> div>
        <div class="row">
            <div class="col-2">Userdiv>
            <div class="col-4"><input type="text" id="userInput" />div>
        div>
        <div class="row">
            <div class="col-2">Messagediv>
            <div class="col-4"><input type="text" id="messageInput" />div>
        div>
        <div class="row"> div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="Send Message" />
            div>
        div>
    div>
    <div class="row">
        <div class="col-12">
            <hr />
        div>
    div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList">ul>
        div>
    div>
    
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.js">script>
    <script type="text/javascript">
        "use strict";
    
        //创建一个与 SignalR 服务器建立连接的新的 HubConnection 对象,并将其配置为连接到指定的路径 "/chatHub"
        var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
        //建立连接后,"Send Message" 才可以使用
        document.getElementById("sendButton").disabled = true;
    
        //接收信息方法
        connection.on("ReceiveMessage", function (user, message) {
            var li = document.createElement("li");
            document.getElementById("messagesList").appendChild(li);
            li.textContent = `${user} says ${message}`;
        });
    
        connection.start().then(function () {
            document.getElementById("sendButton").disabled = false;
        }).catch(function (err) {
            return console.error(err.toString());
        });
    
        document.getElementById("sendButton").addEventListener("click", function (event) {
            var user = document.getElementById("userInput").value;
            var message = document.getElementById("messageInput").value;
            // 使用 SignalR 的 HubConnection 对象调用名为 "SendMessage" 的服务器端方法,并传递参数 user 和 message。
            connection.invoke("SendMessage", user, message).catch(function (err) {
                return console.error(err.toString());
            });
            event.preventDefault();
        });
    script>
    

    image

    为什么JavaScript 接收信息方法 connection.on("ReceiveMessage", function (user, message)

    image

    为什么JavaScript 发送消息方法connection.invoke("SendMessage", user, message)

    image

    参考文档

    https://learn.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/introduction-to-signalr
    https://learn.microsoft.com/zh-cn/aspnet/core/signalr/introduction?view=aspnetcore-6.0

  • 相关阅读:
    java京东社招面试经历
    C++继承
    《第一堂棒球课》:王牌捕手·棒球2号位
    ActiveMQ Artemis与SpringBoot整合
    ssm(Spring+SpringMVC+MyBatis)台球室内乒乓球室体育器械租赁收费系统
    Audio2Face的工作原理
    久其报表软件基本操作指引
    创建一个双模式跨运行时的 JavaScript 包
    Cesium 三维模型使用 blender 调整位置、坐标轴、比例等
    java常用排序算法——冒泡排序,选择排序概述
  • 原文地址:https://www.cnblogs.com/lgxlsm/p/17527479.html