一、搭建項目 1、創建一個ASP.NET Core MVC 項目 2、nuget 下載和安裝 MicroSoft.AspNetCore.SignalR vs提示版本衝突 這時我們選擇低版本即可 二、SignalR配置 1、在model中創建一個類MyHub 代碼如下 public class MyH ...
一、搭建項目
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); } }View Code
2、在Startup中註入SignalR併在Configure中配置路由
3、右鍵項目名=>添加=>添加客戶端庫
-
對於“提供程式”選擇unpkg。
-
對於“庫”輸入 @aspnet/[email protected] (@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>View Code
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(); });View Code
3、Ctrl+F5 運行出兩個網頁