搜尋
首頁後端開發C#.Net教程SignalR實現即時Web聊天的實例程式碼
SignalR實現即時Web聊天的實例程式碼May 25, 2018 pm 04:12 PM
.netasp.netmvcsignalr即時聊天

本篇文章主要介紹了Asp.net SignalR來做即時Web聊天實例程式碼,具有一定的參考價值,有興趣的小夥伴們可以參考一下

本章和大家分享的內容是使用Signal R框架創建個簡易的群聊功能,主要講解如何在.Net的MVC中使用這個框架,由於這個專案有官方文件(當然全英文),後面也不打算寫分享篇了,主要目的是讓朋友們在需要使用Web即時通訊的時候有更多一種解決方案,畢竟這是微軟主推的一種解決方案之一。

SignalR網路簡介

#ASP.NET SignalR 是為ASP.NET 開發人員提供的一個函式庫,可以簡化開發人員將即時Web功能添加到應用程式的過程。即時 Web 功能是指這樣一種功能:當所連接的客戶端變得可用時伺服器程式碼可以立即向其推送內容,而不是讓伺服器等待客戶端請求新的資料。

SignalR當然也提供了非常簡單易用的高階API,讓伺服器端可以單一或批次呼叫客戶端上的JavaScript函數,並且非常方便地進行連線管理,例如客戶端連接到伺服器端,或斷開連接,客戶端分組,以及客戶端授權,使用SignalR都非常容易實現。

SignalR將與客戶端進行即時通訊帶給了ASP .NET 。當然這樣既好用,而且也有足夠的擴充性。以前用戶需要刷新頁面或使用Ajax輪詢才能實現的即時顯示數據,現在只要使用SignalR,就可以簡單實現了。最重要的是您無需重新建立項目,使用現有ASP .NET項目即可無縫使用SignalR。

群組聊天實例效果

咋們先來看看測試案例的效果吧,效果圖:

#介面及其簡單,樣式這裡就不考慮了,主要是展示其用法,這裡涉及到的功能有:

1. 統計在線人數量

2. 顯示線上人數的暱稱和連接方式(本測試案例支援webSockets和longPolling(長連接))

3. 群聊資訊

MVC中如何使用SignalR

首先,我們平常做法建立MVC的Web項目,然後透過Nuget控制台指令: Install-package Microsoft.AspNet.SignalR 加入SignalR的依賴,自動新增的套件如下:

 <package id="Microsoft.AspNet.SignalR" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.Core" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.JS" version="2.2.2" targetFramework="net45" />
 <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.2.2" targetFramework="net45" />

並且自動往MVC專案中的Script資料夾中增加相關的js檔案:

jquery.signalR-2.2. 2.min.js

jquery.signalR-2.2.2.js

然後,我們需要在專案一級目錄建立一個檔案名稱為Startup.cs的類,裡面主要內容補全不下:

[assembly: OwinStartup(typeof(Stage.Api.Extend.Startup))]
namespace Stage.Api.Extend
{
  public class Startup
  {
    public void Configuration(IAppBuilder app)
    {
      app.MapSignalR("/chat", new Microsoft.AspNet.SignalR.HubConfiguration
      {
        EnableDetailedErrors = true,
        EnableJavaScriptProxies = true
      });
    }
  }
}

首先我們從上往下分析注意點:

#1.  OwinStartup(Type) 建構子傳遞的是一個類型,而這個類型對應的就是我們所建立的Startup類,這個透過這個建構函式類別標記起始位置;

2.  namespace Stage.Api.Extend 是我專案的命名空間,這個可以隨便定義;

3.  public void Configuration(IAppBuilder app) 函數是固定必須的,這裡程式會先進入這個方法執行裡面的邏輯程式碼;

4.  app.MapSignalR 是擴充的IAppBuilder介面方法,他有多種表現形式,這裡我選擇的是public <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a> IAppBuilder MapSignalR(this IAppBuilder builder, <a href="http://www.php.cn/wiki/57.html" target="_blank">string</a> path, HubConfiguration configuration); ,這裡看有點類似咋們MVC的路由,這裡主要注意的是這個Path參數,在前端頁面的時候需要用到這個路徑;

到這裡後台需要的配置其實已經就完成了,下面是具體需要操作的業務邏輯處理類,新建一個類別(這裡我取名為ChatHub)並繼承Hub(這是SignalR框架提供),然後裡面的邏輯程式碼如下:

public class ChatHub : Hub
  {
    //
    public int Num = 10001;
    public static List<MoHubUser> _Users = new List<MoHubUser>();

    /// <summary>
    /// 添加聊天人
    /// </summary>
    /// <param name="user"></param>
    public void AddUser(MoHubUser user)
    {

      user.Id = Context.ConnectionId;
      if (!_Users.Any(b => b.Id == user.Id))
      {
        _Users.Add(user);
      }

      //Clients.All.newUser(user);
      Clients.All.userList(_Users);
    }

    /// <summary>
    /// 发送信息
    /// </summary>
    /// <param name="user"></param>
    /// <param name="message"></param>
    public void SendAll(MoHubUser user, string message)
    {
      Clients.All.addNewMessageToPage(user, message);
    }

    /// <summary>
    /// 某个聊天人退出是,通知所有在线人重新加载聊天人数
    /// </summary>
    /// <param name="stopCalled"></param>
    /// <returns></returns>
    public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
    {
      var user = _Users.SingleOrDefault(x => x.Id == Context.ConnectionId);
      if (user != null)
      {
        _Users.Remove(user);
        Clients.All.userList(_Users);
      }
      return base.OnDisconnected(stopCalled);
    }
  }

上面的3个方法分别做了:添加聊天人到List,发送信息到客户端,某个连接失效后通知各个有效的聊天人重新加载信息;这里值得关注的是通过重新 public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) 方法来实现捕获并移除失效连接(这里是聊天人的信息);整篇测试用例通过Context.ConnectionId来保证连接的唯一性,只要有新的链接请求,那么服务端就会分配一个唯一串给这个链接,当客户端关闭页面或关闭链接这个是有就能在OnDisconnected方法中捕获到这个失效的链接的ConnectionId,这样就达到了移除失效聊天人的要求了;为了代码的方便性,这里创建了一个聊天人信息类:

public class MoHubUser
  {

    public string Id { get; set; }
    public string NickName { get; set; }
    public string TransportMethod { get; set; }
  }

到这里后台的聊天室代码就完成了就是这么简单;我们再来看试图中如何来写代码,这里我先给出我的html布局代码:

 @{
  ViewBag.Title = "神牛聊天室 - SignalR";
}
<style type="text/css">
  .p_left {
    width: 70%;
    float: left;
  }

  .p_right {
    width: 28%;
    float: left;
  }

  .ul {
    list-style: none;
    border: 1px solid #ccc;
    height: 500px;
    overflow-y: scroll;
    color: black;
  }

    .ul li {
      padding-top: 5px;
      padding-right: 25px;
    }

  .ul_user {
    list-style: none;
  }

    .ul_user li {
      padding-top: 5px;
    }

  .send {
    position: relative;
    background: #eae7e7;
    border-radius: 5px; /* 圆角 */
    padding-top: 4px;
    padding-left: 5px;
    margin-top: 13px;
  }

    .send .arrow {
      position: absolute;
      top: -16px;
      font-size: 0;
      border: solid 8px;
      border-color: #fff #fff #eae7e7 #fff;
    }
</style>
<h3 id="ViewBag-Title-nbsp-在线人数-span-nbsp-id-sapnUserTotal-span-人">@ViewBag.Title 在线人数:<span id="sapnUserTotal">0</span>人</h3>
<p class="container text-left">
  <p class="p_left">
    <ul class="ul" id="discussion"></ul>
    <textarea rows="5" class="form-control" id="message" maxlength="500" placeholder="开始聊天. . ." style="max-width: 100%"></textarea><br />
    <input type="button" id="sendmessage" value="发 送" class="btn btn-default" />
    <input type="hidden" id="displayname" />
  </p>
  <p class="p_right">
    <ul id="users" class="ul_user"></ul>
  </p>
</p>

<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
@*<script src="~/chat/hubs"></script>*@

客户端这里写法大致有两种选择,一种直接使用生成的代理来操作,一种不用自动生成的代理采用手动创建代理的方式;为了内容的简洁性,这里只简单讲解下自动生成的代理方式,而更多的是分享手动创建代理链接的方式;

使用生成的代理获取链接

首先,我们需要通过Script标签来引用一下自动生成代理的路径: <script src="~/chat/hubs"></script> ,注意啦这里的路径/chat对应的就是咋们在前面Startup.cs文件中配置 app.MapSignalR("/chat" 路径,而后面/hubs固定的写法(至少目前我还没更多的试验过),只有先应用了这个~/chat/hubs,才能在后面使用生成的代理,先上段代码:

var chat = $.connection.chatHub;
    chat.client.newUser = function (user) {
      $("#users").append(&#39; <li><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong></li>&#39;);
    };

    chat.client.userList = function (users) {
      console.log(users);
      $("#sapnUserTotal").html(users.length);
      $.each(users, function (i, item) {
        $("#users").append(&#39; <li>[&#39; + item.TransportMethod + &#39;] <strong>&#39; + item.NickName + &#39;</strong>(&#39; + item.Id + &#39;)</li>&#39;);
      });
    };
    chat.client.addNewMessageToPage = function (user, message) {
      console.log(user);
      $("#discussion").append(&#39; <li ><span><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong>:</span><p class="send">&#39; + message + &#39;<p class="arrow"></p></p></li>&#39;);
    };
  //connection.hub.start({ transport: [&#39;webSockets&#39;, &#39;longPolling&#39;] }).done(function () {
    //  my.TransportMethod = connection.hub.transport.name;
    //  chat.server.addUser(my);

    //  $(&#39;#sendmessage&#39;).click(function () {
    //    //console.log(chat);
    //    var content = $.trim($(&#39;#message&#39;).val());
    //    if (content.length <= 0) { $(&#39;#message&#39;).val(&#39;&#39;).focus(); return; }
    //    chat.server.sendAll(my, content);
    //    $(&#39;#message&#39;).val(&#39;&#39;).focus();
    //  });
    //}).fail(function () {
    //  alert("链接聊天室失败,请重新刷新页面。");
    //});

咋们逐步来解析下代码注意点:

1.  var chat = $.connection.chatHub; 这里的chatHub对应的就是咋们创建的并继承Hub的ChatHub类,由于js变量开头都是小写,所以这里是chatHub,这句活就表示链接到咋们后端了ChatHub类了,然后就可以使用里面的方法啦(这种有点类似于早期的webform中某种ajax请求的写法)

2. 通过chat.client.xxx来接收服务端通知的消息,而这个xxx对应的方法名称和咋们后端的Clients.All.xxx,本章实例对应的是:chat.client.userList = function (users){}对应Clients.All.userList(_Users);这样后端就能直接通知客户端的对应方法了;注意这里我后端Clients.All用的是通知全部客户端的意思,如果您需要通知指定的链接需要用到的是: T Client(string connectionId); 方法

3. chat.client是后端调用客户端,那相对的chat.server就是客户端请求服务端,和上面一样通过chat.server.xxx来指定请求的服务端方法,注意这个时候服务端方法指的是继承类Hub的子类的公共方法(本篇对应的是:chat.server.sendAll(my, content)对应ChatHub.cs文件中的 public void SendAll(MoHubUser user, string message) 函数)

4.  connection.hub.start({ transport: ['webSockets', 'longPolling'] }) 来指定运行的交互协议

以上就是使用生成代理的方式,按照上面的注意点来写应该不是问题;

使用手动创建反向代理来链接

不采用生成的代码的方式,我们只需要修改前端就行了,后台代码不用变或设置不用变动;首先我们把上面说的Script引用自动代理的代码去掉,因为这个时候不需要了,我们还是先上代码:

var my = { NickName: "神牛001", TransportMethod: "" };
    var connection = $.hubConnection("/chat/hubs");
    var chat = connection.createHubProxy(&#39;chatHub&#39;);

    chat.on("userList", function (users) {
      console.log(users);
      $("#sapnUserTotal").html(users.length);
      $("#users").html("");
      $.each(users, function (i, item) {
        $("#users").append(&#39; <li>[&#39; + item.TransportMethod + &#39;] <strong>&#39; + item.NickName + &#39;</strong>(&#39; + item.Id + &#39;)</li>&#39;);
      });
    });

    chat.on("addNewMessageToPage", function (user, message) {
      console.log(user);
      $("#discussion").append(&#39; <li ><span><strong>&#39; + user.NickName + &#39;[&#39; + user.TransportMethod + &#39;]</strong>:</span><p class="send">&#39; + message + &#39;<p class="arrow"></p></p></li>&#39;);

      var p = document.getElementById(&#39;discussion&#39;);
      //p.scrollTop = p.scrollHeight;
      p.scrollTop = 999999;
    });

    var nickName = prompt("请输入一个昵称:", my.NickName);
    my.NickName = nickName.length > 0 ? nickName : my.NickName;
    $(&#39;#displayname&#39;).val(nickName);
    $(&#39;#message&#39;).focus();
   

    connection.start({ transport: [&#39;webSockets&#39;, &#39;longPolling&#39;] }).done(function () {

      my.TransportMethod = connection.transport.name;
      //console.log(my.TransportMethod);
      chat.invoke("addUser", my);

      $(&#39;#sendmessage&#39;).click(function () {
        var content = $.trim($(&#39;#message&#39;).val());
        if (content.length <= 0) { $(&#39;#message&#39;).val(&#39;&#39;).focus(); return; }

        chat.invoke("sendAll", my, content);
        $(&#39;#message&#39;).val(&#39;&#39;).focus();
      });
    });

同样列出如下注意点:

1.  var connection = $.hubConnection("/chat/hubs"); 创建链接,这里的path同样对应后端的 app.MapSignalR("/chat" ,路径保持一致

2.  var chat = connection.createHubProxy('chatHub'); 来创建反向代理链接,这里的name:chatHub对应的是后端的ChatHub类名称

3. 通过on("xxx",function(){})函数来绑定服务端通知客户端的事件,xxx对应Clients.All.xxx中的xxx

4.  connection.start({ transport: ['webSockets', 'longPolling'] }) 来设置允许的链接方式,并开始链接

5. connection.transport.name来获取链接的方式名称,默认start不设置的话有这么几种:webSockets,foreverFrame,serverSentEvents,longPolling

6. chat.invoke("xxx", param1, param2)透過invoke來映射繼承類別Hub的類別的公共方法,這裡實例對應的是: chat.invoke("sendAll", my, content ) 對應public void SendAll(MoHubUser user, string message)

以上是SignalR實現即時Web聊天的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何使用PHP和MQTT为网站添加实时用户聊天功能如何使用PHP和MQTT为网站添加实时用户聊天功能Jul 08, 2023 pm 07:46 PM

如何使用PHP和MQTT为网站添加实时用户聊天功能在当今互联网时代,网站用户越来越需要实时的交流和沟通,为了满足这种需求,我们可以使用PHP和MQTT来为网站添加实时用户聊天功能。本文将介绍如何使用PHP和MQTT实现网站实时用户聊天功能,并提供代码示例。确保环境准备在开始之前,确保你已经安装并配置了PHP和MQTT的运行环境。你可以使用XAMPP等集成开发

C#的就业前景如何C#的就业前景如何Oct 19, 2023 am 11:02 AM

无论您是初学者还是有经验的专业人士,掌握C#将为您的职业发展铺平道路。

使用PHP和MQTT构建实时聊天应用使用PHP和MQTT构建实时聊天应用Jul 08, 2023 pm 03:18 PM

使用PHP和MQTT构建实时聊天应用引言:随着互联网的快速发展和智能设备的普及,实时通讯已经成为了现代社会中必不可少的功能之一。为了满足人们的沟通需求,开发一个实时聊天应用已经成为了众多开发者的追求目标。在本篇文章中,我们将介绍如何使用PHP和MQTT(MessageQueuingTelemetryTransport)协议来构建一个实时聊天应用。什么是

分享几个.NET开源的AI和LLM相关项目框架分享几个.NET开源的AI和LLM相关项目框架May 06, 2024 pm 04:43 PM

当今人工智能(AI)技术的发展如火如荼,它们在各个领域都展现出了巨大的潜力和影响力。今天大姚给大家分享4个.NET开源的AI模型LLM相关的项目框架,希望能为大家提供一些参考。https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.mdSemanticKernelSemanticKernel是一种开源的软件开发工具包(SDK),旨在将大型语言模型(LLM)如OpenAI、Azure

如何使用vue和Element-plus实现实时聊天功能如何使用vue和Element-plus实现实时聊天功能Jul 17, 2023 pm 04:17 PM

如何使用Vue和ElementPlus实现实时聊天功能导语:在当前互联网时代,实时聊天已成为人们交流的重要方式之一。本文将介绍如何使用Vue和ElementPlus来实现一个简单的实时聊天功能,并提供相应的代码示例。一、准备工作在开始开发之前,我们需要安装并配置好Vue和ElementPlus。可以使用VueCLI来创建一个Vue项目,并在项目中安装

使用PHP框架CodeIgniter开发一个实时聊天应用,提供便捷的通讯服务使用PHP框架CodeIgniter开发一个实时聊天应用,提供便捷的通讯服务Jun 27, 2023 pm 02:49 PM

随着移动互联网的发展,即时通信变得越来越重要,越来越普及。对于很多企业而言,实时聊天更像是一种通信服务,提供便捷的沟通方式,可以快速有效地解决业务方面的问题。基于此,本文将介绍如何使用PHP框架CodeIgniter开发一个实时聊天应用。了解CodeIgniter框架CodeIgniter是一个轻量级的PHP框架,提供了一系列的简便的工具和库,帮助开发者快速

基于PHP的实时聊天系统的移动端适配与响应式设计基于PHP的实时聊天系统的移动端适配与响应式设计Aug 25, 2023 pm 02:37 PM

基于PHP的实时聊天系统的移动端适配与响应式设计随着移动设备的普及和技术的发展,越来越多的用户使用移动设备进行实时聊天。为了让用户在移动端也能享受到便捷的聊天体验,我们需要对实时聊天系统进行移动端适配和响应式设计。本文将介绍如何使用PHP进行移动端适配和响应式设计,并提供相应的代码示例。一、移动端适配移动端适配是指根据不同的移动设备的屏幕尺寸和分辨率来调整网

PHP实时聊天系统的消息阅读状态和未读消息提醒PHP实时聊天系统的消息阅读状态和未读消息提醒Aug 13, 2023 pm 06:58 PM

PHP实时聊天系统的消息阅读状态和未读消息提醒在现代社交网络和即时通讯应用中,消息阅读状态和未读消息提醒是必不可少的功能。在PHP实时聊天系统中,我们可以通过一些简单的代码来实现这些功能。本文将为大家介绍如何利用PHP来实现消息阅读状态和未读消息提醒的功能,并提供相应的代码示例。消息阅读状态首先,我们需要在数据库中的消息表中添加一个字段来表示消息的阅读状态。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具