首頁 > 後端開發 > C#.Net教程 > Asp.net SignalR創建即時聊天應用程式

Asp.net SignalR創建即時聊天應用程式

高洛峰
發布: 2016-12-24 14:51:24
原創
1405 人瀏覽過

一.概述

使用 ASP.NET 那麼 SignalR 2 建立一個即時聊天應用程式。將 SignalR 新增 MVC 5 應用程式中,並建立​​聊天視圖傳送並顯示訊息。

在Demo中,將學習SignalR 開發任務包括 ︰

向 MVC 5 應用程式添加那麼 SignalR 圖書館。
建立集線器和浩然啟動類,以將內容推送到客戶端。
使用 web 頁中的那麼 SignalR jQuery 庫發送郵件並顯示更新從集線器。

下面的螢幕快照顯示在瀏覽器中運行的已完成的聊天應用程式。

Asp.net SignalR创建实时聊天应用程序

二.實作

建立一個 ASP.NET MVC 5 應用程序,安裝 SignalR 庫,新增和建立聊天應用程式。

1).在Visual Studio 中,建立一個C# ASP.NET 應用程式的目標.NET 框架4.5,命名為SignalRChat,並按確定.

Asp.net SignalR创建实时聊天应用程序

2).在New ASP.NET Project中,選擇MVC和點擊更改身份驗證

Asp.net SignalR创建实时聊天应用程序

注意:如果應用程式選擇不同的身份驗證提供程序,將創建Startup.cs類,這裡選擇無身份驗證所有我們自己創建一個Startup類。

3).安裝SignalR
開啟工具 |程式庫管理器 |套件管理員控制台,然後執行下列指令。此步驟為專案中新增一組腳本檔案和啟用那麼 SignalR 功能的組件參考。

輸入:install-package Microsoft.AspNet.SignalR

Asp.net SignalR创建实时聊天应用程序

安裝完成,Scripts資料夾下出現了這樣的檔案:

Asp.net SignalR创建实时聊天应用程序

4). ,命名為Startup:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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).在專案中新增Hubs資料夾,新增現有項目:

滑鼠右鍵點選Hubs資料夾,請點選新增|新項目,選擇Visual C# |Web |那麼SignalR節點在已安裝窗格中,從中心窗格中,選取那麼SignalR 集線器類別(v2)並建立名為ChatHub.cs。


修改程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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類別發現在Controllers/HomeController.cs中,將下列方法加入類別。此方法傳回的聊天的視圖,您將在後面的步驟中建立。

1

2

3

4

5

6

7

public ActionResult Chat()

  

{

  

 return View();

  

}

登入後複製

   

7).在Chat()方法上右鍵>新增視圖頁

Asp.net SignalR创建实时聊天应用程序修改碼為:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

@{

 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 () {

   // 建立对应server端Hub class的对象,请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写

   var chat = $.connection.chatHub;

   // 定义client端的javascript function,供server端hub,通过dynamic的方式,调用所有Clients的javascript function

   chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)

    //当server端调用sendMessage时,将server push的message数据,呈现在wholeMessage中

    $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)

     + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);

   };

   // Get the user name and store it to prepend to messages.

   $(&#39;#displayname&#39;).val(prompt(&#39;Enter your name:&#39;, &#39;&#39;));

   // Set initial focus to message input box.

   $(&#39;#message&#39;).focus();

   //把connection打开

   $.connection.hub.start().done(function () {

    $(&#39;#sendmessage&#39;).click(function () {

     //调用叫server端的Hub对象,将#message数据传给server

     chat.server.send($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());

     $(&#39;#message&#39;).val(&#39;&#39;).focus();

    });

   });

  });

  // This optional function html-encodes messages for display in the page.

  function htmlEncode(value) {

   var encodedValue = $(&#39;<div />&#39;).text(value).html();

   return encodedValue;

  }

 </script>

}

登入後複製

修改碼為:

即時加入即時同步聊天。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。


更多Asp.net SignalR創建即時聊天應用程式相關文章請關注PHP中文網!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板