


Exemple de code pour implémenter un chat Web en temps réel à l'aide de SignalR
Cet article présente principalement Asp.net SignalR pour utiliser un exemple de code de chat Web en temps réel, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Le contenu partagé avec vous dans ce chapitre est à utiliser. Le framework Signal R crée une fonction de discussion de groupe simple. Il explique principalement comment utiliser ce framework dans le MVC de .Net. Puisque ce projet dispose de documents officiels (tous en anglais bien sûr), je n'écrirai pas d'article de partage plus tard. est de laisser des amis Nous avons une solution supplémentaire lorsque nous devons utiliser la communication Web en temps réel. Après tout, c'est l'une des solutions promues par Microsoft.
Introduction en ligne de SignalR
ASP.NET SignalR est une bibliothèque fournie aux développeurs ASP.NET qui peut simplifier l'intégration du Web en temps réel par les développeurs. Le processus d’ajout de fonctionnalités à une application. La fonctionnalité Web en temps réel fait référence à une fonctionnalité dans laquelle le code du serveur peut transmettre le contenu à un client connecté dès qu'il devient disponible, plutôt que de laisser le serveur attendre que le client demande de nouvelles données.
Bien entendu, SignalR fournit également une API de haut niveau très simple et facile à utiliser, qui permet au serveur d'appeler des fonctions JavaScript sur le client individuellement ou par lots, et il est très pratique de gérer les connexions , comme la connexion du client au serveur, ou la déconnexion, le regroupement de clients et l'autorisation du client sont tous très faciles à mettre en œuvre à l'aide de SignalR.
SignalR apporte la communication en temps réel avec les clients à ASP .NET. Bien sûr, cela est facile à utiliser et offre une évolutivité suffisante. Dans le passé, les utilisateurs devaient actualiser la page ou utiliser l'interrogation Ajax pour obtenir un affichage des données en temps réel. Ils peuvent désormais simplement utiliser SignalR. La chose la plus importante est que vous n'avez pas besoin de recréer le projet, vous pouvez utiliser SignalR de manière transparente en utilisant votre projet ASP .NET existant.
Effet d'instance de discussion de groupe
Jetons d'abord un coup d'œil à l'effet du scénario de test, rendu :
L'interface est extrêmement simple. Le style ne sera pas pris en compte ici. Il s'agit principalement de montrer son utilisation. Les fonctions impliquées ici sont :
1.
2. Afficher le pseudo et la méthode de connexion du nombre de personnes en ligne (ce cas de test prend en charge webSockets et longPolling (connexion longue))
3.
Comment le faire dans MVC à l'aide de SignalR Tout d'abord, nous créons un projet Web MVC comme d'habitude, puis utilisons la commande de la console Nuget : Inst
all-package Microsoft.AspNet.SignalR pour rejoindre les dépendances SignalR, les packages automatiquement ajoutés sont les suivants :
et les fichiers js pertinents sont automatiquement ajoutés au dossier Script du projet MVC :<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" />
.signalR- 2.2.2.min.js
jquery.signalR-2.2.2.js
Ensuite, nous avons besoin pour créer une classe avec le nom de fichier Startup.cs dans le répertoire au niveau du projet, le contenu principal de celle-ci ne peut pas être complété :
Tout d'abord, nous analysons les points d'attention de haut en bas :[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.
Le constructeur OwinStartup(Type)
passe un type, et ce type correspond à la classe Startup que nous avons créée, qui marque la position de départ à travers cette classe constructeur 2.
espace de noms namespace Stage.Api.Extend
de mon projet, ceci Vous pouvez le définir à volonté 3
public void Configuration(IAppBuilder app)
4
Interface app.MapSignalR
étendue, elle a de nombreuses formes d'expression, ici je choisis public <a href. ="http://www.php.cn/wiki/188.html" target="_blank" >static<a href="http://www.php.cn/code/11829.html" target="_blank"> IAppBuilder MapSignalR (ce constructeur IAppBuilder, <a href="http://www.php.cn/ wiki/57.html" target="_blank">string</a> chemin, configuration HubConfiguration); < /code>, ici, cela ressemble un peu au <code>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);
routage de notre MVC. La principale chose à noter ici est le paramètre Path, qui doit être utilisé dans la page front-end ;
héritez de Hub (ceci est fourni par le framework SignalR), puis à l'intérieur Le code logique est le suivant :
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>@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(' <li><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong></li>'); }; chat.client.userList = function (users) { console.log(users); $("#sapnUserTotal").html(users.length); $.each(users, function (i, item) { $("#users").append(' <li>[' + item.TransportMethod + '] <strong>' + item.NickName + '</strong>(' + item.Id + ')</li>'); }); }; chat.client.addNewMessageToPage = function (user, message) { console.log(user); $("#discussion").append(' <li ><span><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong>:</span><p class="send">' + message + '<p class="arrow"></p></p></li>'); }; //connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () { // my.TransportMethod = connection.hub.transport.name; // chat.server.addUser(my); // $('#sendmessage').click(function () { // //console.log(chat); // var content = $.trim($('#message').val()); // if (content.length <= 0) { $('#message').val('').focus(); return; } // chat.server.sendAll(my, content); // $('#message').val('').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('chatHub'); chat.on("userList", function (users) { console.log(users); $("#sapnUserTotal").html(users.length); $("#users").html(""); $.each(users, function (i, item) { $("#users").append(' <li>[' + item.TransportMethod + '] <strong>' + item.NickName + '</strong>(' + item.Id + ')</li>'); }); }); chat.on("addNewMessageToPage", function (user, message) { console.log(user); $("#discussion").append(' <li ><span><strong>' + user.NickName + '[' + user.TransportMethod + ']</strong>:</span><p class="send">' + message + '<p class="arrow"></p></p></li>'); var p = document.getElementById('discussion'); //p.scrollTop = p.scrollHeight; p.scrollTop = 999999; }); var nickName = prompt("请输入一个昵称:", my.NickName); my.NickName = nickName.length > 0 ? nickName : my.NickName; $('#displayname').val(nickName); $('#message').focus(); connection.start({ transport: ['webSockets', 'longPolling'] }).done(function () { my.TransportMethod = connection.transport.name; //console.log(my.TransportMethod); chat.invoke("addUser", my); $('#sendmessage').click(function () { var content = $.trim($('#message').val()); if (content.length <= 0) { $('#message').val('').focus(); return; } chat.invoke("sendAll", my, content); $('#message').val('').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) utilise Invoke pour mapper les méthodes publiques des classes qui héritent de la classe Hub. Les exemples ici correspondent à : chat.invoke("sendAll", my, content)
correspond à public void SendAll(MoHubUser user, string message)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer une application de chat en temps réel à l'aide de React et WebSocket Introduction : Avec le développement rapide d'Internet, la communication en temps réel a attiré de plus en plus d'attention. Les applications de chat en direct font désormais partie intégrante de la vie sociale et professionnelle moderne. Cet article expliquera comment créer une application simple de chat en temps réel à l'aide de React et WebSocket, et fournira des exemples de code spécifiques. 1. Préparation technique Avant de commencer à créer une application de chat en temps réel, nous devons préparer les technologies et outils suivants : React : un pour la construction

Comment implémenter la fonction de chat en temps réel en PHP Avec la popularité des réseaux sociaux et des applications de messagerie instantanée, la fonction de chat en temps réel est devenue une fonctionnalité standard de nombreux sites Web et applications. Dans cet article, nous explorerons comment implémenter la fonctionnalité de chat en direct à l'aide du langage PHP, ainsi que quelques exemples de code. Utilisation du protocole WebSocket La fonctionnalité de chat en direct nécessite généralement l'utilisation du protocole WebSocket, qui permet une communication bidirectionnelle entre le serveur et le client. En PHP, nous pouvons utiliser la bibliothèque Ratchet pour implémenter les services WebSocket

Chat en ligne en temps réel utilisant la technologie Workerman et HTML5 WebSocket Introduction : Avec le développement rapide d'Internet et la popularité des smartphones, le chat en ligne en temps réel est devenu un élément indispensable de la vie quotidienne des gens. Afin de répondre aux besoins des utilisateurs, les développeurs web recherchent constamment des solutions de chat plus efficaces et en temps réel. Cet article explique comment combiner le framework PHP Workerman et la technologie HTML5 WebSocket pour implémenter un système de chat en ligne simple en temps réel.

Que vous soyez débutant ou professionnel expérimenté, la maîtrise du C# ouvrira la voie à votre carrière.

Le développement des technologies d’intelligence artificielle (IA) bat son plein aujourd’hui et elles ont montré un grand potentiel et une grande influence dans divers domaines. Aujourd'hui, Dayao partagera avec vous 4 cadres de projets liés au modèle d'IA open source .NET LLM, dans l'espoir de vous fournir une référence. https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.mdSemanticKernelSemanticKernel est un kit de développement logiciel (SDK) open source conçu pour intégrer de grands modèles de langage (LLM) tels qu'OpenAI, Azure

Comment utiliser le framework Layui pour développer une application de chat en temps réel Introduction : De nos jours, le développement des réseaux sociaux est devenu de plus en plus rapide et les méthodes de communication des gens sont progressivement passées des appels téléphoniques et SMS traditionnels au chat en temps réel. Les applications de chat en direct sont devenues un élément indispensable dans la vie des gens, offrant un moyen pratique et rapide de communiquer. Cet article présentera comment utiliser le framework Layui pour développer une application de chat en temps réel, y compris des exemples de code spécifiques. 1. Choisissez une architecture appropriée Avant de commencer le développement, nous devons choisir une architecture appropriée pour prendre en charge le temps réel.

Introduction Dans le monde numérique en évolution rapide d'aujourd'hui, il est crucial de créer des applications WEB robustes, flexibles et maintenables. L'architecture PHPmvc fournit une solution idéale pour atteindre cet objectif. MVC (Model-View-Controller) est un modèle de conception largement utilisé qui sépare les différents aspects d'une application en composants indépendants. Les fondements de l'architecture MVC Le principe fondamental de l'architecture MVC est la séparation des préoccupations : Modèle : encapsule les données et la logique métier de l'application. Vue : responsable de la présentation des données et de la gestion des interactions des utilisateurs. Contrôleur : coordonne l'interaction entre les modèles et les vues, gère les demandes des utilisateurs et la logique métier. Architecture PHPMVC L'architecture phpMVC suit le modèle MVC traditionnel mais introduit également des fonctionnalités spécifiques au langage. Ce qui suit est PHPMVC

État de lecture des messages et rappel des messages non lus du système de discussion en temps réel PHP Dans les réseaux sociaux modernes et les applications de messagerie instantanée, l'état de lecture des messages et le rappel des messages non lus sont des fonctions essentielles. Dans le système de chat en temps réel PHP, nous pouvons implémenter ces fonctions via quelques codes simples. Cet article expliquera comment utiliser PHP pour implémenter les fonctions d'état de lecture des messages et de rappel des messages non lus, et fournira des exemples de code correspondants. Statut de lecture du message Tout d'abord, nous devons ajouter un champ à la table des messages dans la base de données pour représenter l'état de lecture du message.
