.NET CORE 6.0 之SignalR 实时通讯

互联网 2022/5/22 6:05:54

一、 创建 Web 应用项目 在“配置新项目”对话框中,为“项目名称”输入 SignalRChat。 请务必将项目命名为“SignalRChat”(包括匹配大小写),这样在复制和粘贴代码时命名空间就会匹配。添加 SignalR 客户端库 ASP.NET Core 共享框架中包含 SignalR 服务器库。 JavaScr…
一、

创建 Web 应用项目

 

 

  1. 在“配置新项目”对话框中,为“项目名称”输入 SignalRChat。 请务必将项目命名为“SignalRChat”(包括匹配大小写),这样在复制和粘贴代码时命名空间就会匹配。

添加 SignalR 客户端库

ASP.NET Core 共享框架中包含 SignalR 服务器库。 JavaScript 客户端库不会自动包含在项目中。 对于此教程,使用库管理器 (LibMan) 从 unpkg 获取客户端库。 unpkg 是一个快速的全局内容分发网络,适用于 npm 上的所有内容。

  • Visual Studio
  • Visual Studio Code
  • Visual Studio for Mac
  • 在“解决方案资源管理器”>中,右键单击项目,然后选择“添加”“客户端库”。
  • 在“添加客户端库”对话框中:
    • 为“提供程序”选择“unpkg”
    • 对于“库”,输入 @microsoft/signalr@latest
    • 选择“选择特定文件”,展开“dist/browser”文件夹,然后选择 signalr.js 和 signalr.min.js
    • 将“目标位置”设置为 wwwroot/js/signalr/
    • 选择“安装”
          •  

             

          • 创建 SignalR 中心

            中心是一个类,用作处理客户端 - 服务器通信的高级管道。

            • 在 SignalRChat 项目文件夹中,创建 Hubs 文件夹。
            • 在 Hubs 文件夹中,使用以下代码创建 ChatHub 类:
            C#
            using Microsoft.AspNetCore.SignalR;
            
            namespace SignalRChat.Hubs
            {
                public class ChatHub : Hub
                {
                    public async Task SendMessage(string user, string message)
                    {
                        await Clients.All.SendAsync("ReceiveMessage", user, message);
                    }
                }
            }
    • hatHub 类继承自 SignalRHub。 Hub 类管理连接、组和消息。

      可通过已连接客户端调用 SendMessage,以向所有客户端发送消息。 本教程后面部分将显示调用该方法的 JavaScript 客户端代码。 SignalR 代码是异步模式,可提供最大的可伸缩性。

      配置 SignalR

      必须将 SignalR 服务器配置为将 SignalR 请求传递给 SignalR。 将以下突出显示的代码添加到 Program.cs 文件。

       

       添加客户端

       

       

      767
      <div class="container">
          <div class="row"> </div>
          <div class="row">
              <div class="col-2">User</div>
              <div class="col-4"><input type="text" id="userInput" /></div>
          </div>
          <div class="row">
              <div class="col-2">Message</div>
              <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="js/signalr/dist/browser/signalr.js"></script>
      <script src="chat.js"></script>
      

        

       

      chat.js

      "use strict";
      var url = "http://localhost:5096"
      var connection = new signalR.HubConnectionBuilder().withUrl(url+"/chatHub").build();
      
      //Disable the send button until connection is established.
      document.getElementById("sendButton").disabled = true;
      
      connection.on("ReceiveMessage", function (user, message) {
          var li = document.createElement("li");
          document.getElementById("messagesList").appendChild(li);
          // We can assign user-supplied strings to an element's textContent because it
          // is not interpreted as markup. If you're assigning in any other way, you 
          // should be aware of possible script injection concerns.
          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;
          connection.invoke("SendMessage", user, message).catch(function (err) {
              return console.error(err.toString());
          });
          event.preventDefault();
      });
      

        

      运行,跨域报错

      Access to fetch at 'http://localhost:5096/chatHub/negotiate?negotiateVersion=1' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
      

        

      解决方法
    • builder.Services.AddCors(options => options.AddPolicy("CorsPolicy",
      set =>
      {
      set.SetIsOriginAllowed(origin => true)//这个必须加
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials();//这个一定不能少

      }));

       

    • 通过控制器像客户端发送信息

    •  

       

    •  

       

       

       

    •  

      调用其他地方的服务

    •  

       

        

       

       

      授权和验证

      SignalR会采用ASP.NET Core配置好的授权和验证体系.

      用法和Controller差不多:

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[.NET CORE 6.0 之SignalR 实时通讯]http://www.zyiz.net/tech/detail-324165.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>