标签：CORE SignalR getElementById user 6.0 message document 客户端
一、创建 Web 应用项目
-
在“配置新项目”对话框中，为“项目名称”输入
SignalRChat。 请务必将项目命名为“SignalRChat”（包括匹配大小写），这样在复制和粘贴代码时命名空间就会匹配。
添加 SignalR 客户端库
ASP.NET Core 共享框架中包含 SignalR 服务器库。 JavaScript 客户端库不会自动包含在项目中。 对于此教程，使用库管理器 (LibMan) 从 unpkg 获取客户端库。 unpkg 是一个快速的全局内容分发网络，适用于 npm 上的所有内容。
- 在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。
- 在“添加客户端库”对话框中：
- 为“提供程序”选择“unpkg”
- 对于“库”，输入
@microsoft/signalr@latest - 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择
signalr.js和signalr.min.js。 - 将“目标位置”设置为 wwwroot/js/signalr/
- 选择“安装”
-
创建 SignalR 中心
中心是一个类，用作处理客户端 - 服务器通信的高级管道。
- 在 SignalRChat 项目文件夹中，创建 Hubs 文件夹。
- 在 Hubs 文件夹中，使用以下代码创建
ChatHub类：
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差不多:
标签：CORE,SignalR,getElementById,user,6.0,message,document,客户端 来源： https://www.cnblogs.com/topguntopgun/p/16296735.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。