Asp.net SignalR創(chuàng)建實(shí)時聊天應(yīng)用程序
一.概述
使用 ASP.NET 那么 SignalR 2 創(chuàng)建一個實(shí)時聊天應(yīng)用程序。將 SignalR 添加 MVC 5 應(yīng)用程序中,并創(chuàng)建聊天視圖發(fā)送并顯示消息。
在Demo中,將學(xué)習(xí)SignalR 開發(fā)任務(wù)包括 ︰
向 MVC 5 應(yīng)用程序添加那么 SignalR 圖書館。
創(chuàng)建集線器和浩然啟動類,以將內(nèi)容推送到客戶端。
使用 web 頁中的那么 SignalR jQuery 庫發(fā)送郵件并顯示更新從集線器。
下面的屏幕快照顯示在瀏覽器中運(yùn)行的已完成的聊天應(yīng)用程序。
二.實(shí)現(xiàn)
創(chuàng)建一個 ASP.NET MVC 5 應(yīng)用程序,安裝 SignalR 庫,添加和創(chuàng)建聊天應(yīng)用程序。
1).在 Visual Studio 中,創(chuàng)建一個 C# ASP.NET 應(yīng)用程序的目標(biāo).NET 框架 4.5,命名為 SignalRChat,并單擊確定.
2).在New ASP.NET Project對話框中,選擇MVC和單擊更改身份驗(yàn)證
注意:如果應(yīng)用程序選擇一個不同的身份驗(yàn)證提供程序,將創(chuàng)建Startup.cs類,這里選擇無身份驗(yàn)證所有我們自己創(chuàng)建一個Startup類。
3).安裝SignalR
打開工具 |庫包管理器 |程序包管理器控制臺,然后運(yùn)行以下命令。此步驟向項(xiàng)目中添加一組腳本文件和啟用那么 SignalR 功能的程序集引用。
輸入:install-package Microsoft.AspNet.SignalR
安裝完成,Scripts文件夾下出現(xiàn)了這樣的文件:
4).創(chuàng)建Startup類:
在根目錄下創(chuàng)建類,命名為Startup:
using Owin; using Microsoft.Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR(); } } }
5).在項(xiàng)目中添加Hubs文件夾,添加現(xiàn)有項(xiàng):
鼠標(biāo)右鍵單擊Hubs文件夾,請單擊添加|新項(xiàng)目,選擇Visual C# |Web |那么 SignalR節(jié)點(diǎn)在已安裝窗格中,從中心窗格中,選擇那么 SignalR 集線器類 (v2)并創(chuàng)建名為ChatHub.cs。
修改代碼:
using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the addNewMessageToPage method to update clients. Clients.All.addNewMessageToPage(name, message); } } }
6).編輯HomeController類發(fā)現(xiàn)在Controllers/HomeController.cs中,將以下方法添加到類。此方法返回的聊天的視圖,您將在后面的步驟中創(chuàng)建。
public ActionResult Chat() { return View(); }
7).在Chat()方法上右鍵>添加視圖頁
修改代碼為:
@{ ViewBag.Title = "Chat"; } <h2>Chat</h2> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"></ul> </div> @section scripts { <!--Script references. --> <!--The jQuery library is required and is referenced by default in _Layout.cshtml. --> <!--Reference the SignalR library. --> <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="~/signalr/hubs"></script> <!--SignalR script to update the chat page and send messages.--> <script> $(function () { // 建立對應(yīng)server端Hub class的對象,請注意ChatHub(Hubs文件夾下的類名)的第一個字母要改成小寫 var chat = $.connection.chatHub; // 定義client端的javascript function,供server端hub,通過dynamic的方式,調(diào)用所有Clients的javascript function chat.client.addNewMessageToPage = function (name, message) { //這里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message) //當(dāng)server端調(diào)用sendMessage時,將server push的message數(shù)據(jù),呈現(xiàn)在wholeMessage中 $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').val(prompt('Enter your name:', '')); // Set initial focus to message input box. $('#message').focus(); //把connection打開 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { //調(diào)用叫server端的Hub對象,將#message數(shù)據(jù)傳給server chat.server.send($('#displayname').val(), $('#message').val()); $('#message').val('').focus(); }); }); }); // This optional function html-encodes messages for display in the page. function htmlEncode(value) { var encodedValue = $('<div />').text(value).html(); return encodedValue; } </script> }
F5運(yùn)行項(xiàng)目就可以實(shí)現(xiàn)上面的效果,可以有用戶實(shí)時加入實(shí)時同步聊天。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
asp.net提取多層嵌套json數(shù)據(jù)的方法
這篇文章主要介紹了asp.net提取多層嵌套json數(shù)據(jù)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了asp.net解析json格式數(shù)據(jù)的步驟與相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06.Net Core 多文件打包壓縮的實(shí)現(xiàn)代碼
最近項(xiàng)目需要實(shí)現(xiàn)多文件打包的功能,本文就詳細(xì)的介紹了.Net Core 多文件打包壓縮的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12VS2022?.NET5一鍵發(fā)布到遠(yuǎn)程騰訊云IIS服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了VS2022?.NET5一鍵發(fā)布到遠(yuǎn)程騰訊云IIS服務(wù)器,首先需要添加服務(wù)器相關(guān)功能,文中通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04Asp.Net的FileUpload類實(shí)現(xiàn)上傳文件實(shí)例
這篇文章主要介紹了Asp.Net的FileUpload類實(shí)現(xiàn)上傳文件的方法,以實(shí)例形式講述了上傳文件類的具體實(shí)現(xiàn)方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11ASP.NET MVC5+EF6+EasyUI 后臺管理系統(tǒng)(81)-數(shù)據(jù)篩選(萬能查詢)實(shí)例
本篇文章主要介紹了ASP.NET MVC5+EF6+EasyUI 后臺管理系統(tǒng)(81)-數(shù)據(jù)篩選(萬能查詢) ,具有一定的參考價值,有興趣的可以了解一下。2016-12-12