一、搭建项目
1、创建一个ASP.NET Core MVC 项目
![4624570-943d76621cac2e08.png](https://i-blog.csdnimg.cn/blog_migrate/0b515152fdd522789a166c018c021228.webp?x-image-process=image/format,png)
2、nuget 下载和安装 MicroSoft.AspNetCore.SignalR
![4624570-5530b18a303bf8ff.png](https://i-blog.csdnimg.cn/blog_migrate/4e09e06185ab1a43b1717546275f5491.webp?x-image-process=image/format,png)
vs提示版本冲突
![4624570-b7a8cbc87bc33c8d.png](https://i-blog.csdnimg.cn/blog_migrate/ef0870d1387d61261b5d37012677d4e5.webp?x-image-process=image/format,png)
这时我们选择低版本即可
![4624570-5d4fb82349d6ca43.png](https://i-blog.csdnimg.cn/blog_migrate/e021306a55d5b873e2234044229d3124.webp?x-image-process=image/format,png)
![4624570-e021c9448ddeae46.png](https://i-blog.csdnimg.cn/blog_migrate/fd10076ba501048d5083c18e9a046487.webp?x-image-process=image/format,png)
二、SignalR配置
1、在model中创建一个类MyHub 代码如下
![4624570-c5d0c98492470c64.gif](https://i-blog.csdnimg.cn/blog_migrate/c45b37eebdad46a17d958aa1a90562c7.webp?x-image-process=image/format,png)
<pre class="prettyprint linenums prettyprinted" style="border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; margin: 15px 0px; font: 12px/20px "courier new"; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; background: url("/img/codecolorer_bg.gif") center top rgb(251, 251, 251); padding: 10px 35px; box-shadow: rgb(238, 238, 238) 40px 0px 0px inset, rgb(51, 183, 150) 42px 0px 0px inset;">
- 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);
- }
- }
</pre>
View Code
2、在Startup中注入SignalR并在Configure中配置路由
![4624570-edad7f6d806da108.png](https://i-blog.csdnimg.cn/blog_migrate/23fc15120b86bbe39d5643c5c794c73a.webp?x-image-process=image/format,png)
![4624570-2610ce34ef2846ef.png](https://i-blog.csdnimg.cn/blog_migrate/4b94869edc27b29d2128b849b7f57b85.webp?x-image-process=image/format,png)
3、右键项目名=>添加=>添加客户端库
![4624570-f9be1b871706d809.png](https://i-blog.csdnimg.cn/blog_migrate/800d5b5bf4286542d9da76dc26b3b1f8.webp?x-image-process=image/format,png)
对于“提供程序”选择unpkg。
对于“库”输入 @aspnet/signalr@1.0.4 (@1.0.4 是根据 nuget SignalR的本本定的)。
选择“选择特定文件”,展开“dist/browser”文件夹,然后选择“signalr.js”和“signalr.min.js”。
将“目标位置”设置为 wwwroot/lib/signalr/,然后选择“安装”。
![4624570-f123422dc02f3680.png](https://i-blog.csdnimg.cn/blog_migrate/b5f2471ff810fe529770e0c50b3beb53.webp?x-image-process=image/format,png)
![4624570-865b170f942057ad.png](https://i-blog.csdnimg.cn/blog_migrate/277cc1b95584c51354a097bff3a4e44d.webp?x-image-process=image/format,png)
配置完毕。
三、编码实现
1、修改Views/Home中的Index.cshtml如下
![4624570-3b436c475e384542.gif](https://i-blog.csdnimg.cn/blog_migrate/fbba8443cacce37e66598fd01b6a11d8.webp?x-image-process=image/format,png)
<pre class="prettyprint linenums prettyprinted" style="border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; margin: 15px 0px; font: 12px/20px "courier new"; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; background: url("/img/codecolorer_bg.gif") center top rgb(251, 251, 251); padding: 10px 35px; box-shadow: rgb(238, 238, 238) 40px 0px 0px inset, rgb(51, 183, 150) 42px 0px 0px inset;">
- <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>
</pre>
View Code
2、在js文件见创建一个js文件 chat.js
![4624570-75047f6fc9480ed7.gif](https://i-blog.csdnimg.cn/blog_migrate/3b55c33124d962e907c48310f3ceb79a.webp?x-image-process=image/format,png)
<pre class="prettyprint linenums prettyprinted" style="border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); border-image: initial; margin: 15px 0px; font: 12px/20px "courier new"; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; background: url("/img/codecolorer_bg.gif") center top rgb(251, 251, 251); padding: 10px 35px; box-shadow: rgb(238, 238, 238) 40px 0px 0px inset, rgb(51, 183, 150) 42px 0px 0px inset;">
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();
});
</pre>
View Code
3、Ctrl+F5 运行出两个网页
![4624570-d228c1e13b485513.png](https://i-blog.csdnimg.cn/blog_migrate/e1f8911ba0c777b7e6956d794765f790.webp?x-image-process=image/format,png)
![4624570-7ad1442474a63a1f.gif](https://i-blog.csdnimg.cn/blog_migrate/e91161d487923eec3e64749ba26533e1.webp?x-image-process=image/format,png)