Asp.Net Core + SignalR 实现实时通信

一、搭建项目

1、创建一个ASP.NET Core MVC 项目

image

2、nuget 下载和安装 MicroSoft.AspNetCore.SignalR

image

vs提示版本冲突

image

这时我们选择低版本即可

image image

二、SignalR配置

1、在model中创建一个类MyHub 代码如下

image

<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;">

1. public class MyHub:Hub
2. {
3. public async Task SendMessage(string user, string message)
4. {
5. await Clients.All.SendAsync("ReceiveMessage", user+"["+DateTime.Now.ToLongTimeString()+"]", message);
6. }
7. public async Task SendMessageToUser(string user, string message)
8. {
9. await Clients.Client(Context.ConnectionId).SendAsync("ReceiveMessage", user + ":" + DateTime.Now.ToLongTimeString()+"]", message);
10. }
11. }

</pre>

View Code

2、在Startup中注入SignalR并在Configure中配置路由

image image

3、右键项目名=>添加=>添加客户端库

image

• 对于“提供程序”选择unpkg。

• 对于“库”输入 @aspnet/signalr@1.0.4 （@1.0.4 是根据 nuget SignalR的本本定的）。

• 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择“signalr.js”和“signalr.min.js”。

• 将“目标位置”设置为 wwwroot/lib/signalr/，然后选择“安装”。

image image

配置完毕。

三、编码实现

1、修改Views/Home中的Index.cshtml如下

image

<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;">

1. <div class="container">
2. <div class="row"> </div>
3. <div class="row">
4. <div class="col-6"> </div>
5. <div class="col-6">
6. User..........<input type="text" id="userInput" />
7. <br />
8. Message...<input type="text" id="messageInput" />
9. <input type="button" id="sendButton" value="Send Message" />
10. </div>
11. </div>
12. <div class="row">
13. <div class="col-12">
14. <hr />
15. </div>
16. </div>
17. <div class="row">
18. <div class="col-6"> </div>
19. <div class="col-6">
20. <ul id="messagesList"></ul>
21. </div>
22. </div>
23. </div>
24. <script src="~/lib/signalr/dist/browser/signalr.js"></script>
25. <script src="~/js/chat.js"></script>

</pre>

View Code

2、在js文件见创建一个js文件 chat.js

image

<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;">

1. var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

2. connection.on("ReceiveMessage", function (user, message) {

3. var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");

4. var encodedMsg = user + " says " + msg;

5. var li = document.createElement("li");

6. li.textContent = encodedMsg;

7. document.getElementById("messagesList").appendChild(li);

8. });

9. connection.start().catch(function (err) {

10. return console.error(err.toString());

11. });

12. document.getElementById("sendButton").addEventListener("click", function (event) {

13. var user = document.getElementById("userInput").value;

14. var message = document.getElementById("messageInput").value;

15. connection.invoke("SendMessage", user, message).catch(function (err) {

16. return console.error(err.toString());

17. });

18. event.preventDefault();

19. });

</pre>

View Code

3、Ctrl+F5 运行出两个网页

image 好书推荐、视频分享，与您一起进步