Asp.Net Core + SignalR 实现实时通信
时间:2019-09-24
本文章向大家介绍Asp.Net Core + SignalR 实现实时通信,主要包括Asp.Net Core + SignalR 实现实时通信使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、搭建项目
1、创建一个ASP.NET Core MVC 项目
2、nuget 下载和安装 MicroSoft.AspNetCore.SignalR
vs提示版本冲突
这时我们选择低版本即可
二、SignalR配置
1、在model中创建一个类MyHub 代码如下
public class MyHub:Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user+"["+DateTime.Now.ToLongTimeString()+"]", message); } public async Task SendMessageToUser(string user, string message) { await Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", user + ":" + DateTime.Now.ToLongTimeString()+"]", message); } }
2、在Startup中注入SignalR并在Configure中配置路由
3、右键项目名=>添加=>添加客户端库
-
对于“提供程序”选择unpkg。
-
对于“库”输入 @aspnet/signalr@1.0.4 (@1.0.4 是根据 nuget SignalR的本本定的)。
-
选择“选择特定文件”,展开“dist/browser”文件夹,然后选择“signalr.js”和“signalr.min.js”。
-
将“目标位置”设置为 wwwroot/lib/signalr/,然后选择“安装”。
配置完毕。
三、编码实现
1、修改Views/Home中的Index.cshtml如下
<div class="container"> <div class="row"> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> User..........<input type="text" id="userInput" /> <br /> Message...<input type="text" id="messageInput" /> <input type="button" id="sendButton" value="Send Message" /> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> </div> <script src="~/lib/signalr/dist/browser/signalr.js"></script> <script src="~/js/chat.js"></script>
2、在js文件见创建一个js文件 chat.js
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); connection.on("ReceiveMessage", function (user, message) { var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); var encodedMsg = user + " says " + msg; var li = document.createElement("li"); li.textContent = encodedMsg; document.getElementById("messagesList").appendChild(li); }); connection.start().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(); });
3、Ctrl+F5 运行出两个网页
分类: .Net
原文地址:https://www.cnblogs.com/webenh/p/11578559.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 接口自动化测试框架-AIM
- hexo 图片显示问题及使用typora设置图片路径
- 接口自动化项目实践
- 结对测试算法性能优化(代码层面)
- 结对测试算法性能优化(用例设计层面)
- 使用travisCI自动部署hexo博客并使用国内外不同dns
- 寻找cookie之旅
- send_keys报错element not interactable
- 博客园上传markdown文件
- Git比较分支差异的3个命令
- IntelliJ IDEA添加Class自动生成@author@date模板代码
- 如何优雅的封装requests
- nginx(一) 基础知识
- kubernetes(十三) k8s 集群监控
- TestNG跑个Demo并打个Jar包