Exemple de salle de discussion d'implémentation HTML5-WebSocket-Tutoriel H5-php.cn

Exemple de salle de discussion d'implémentation HTML5-WebSocket

巴扎黑

Libérer： 2017-05-21 15:10:48

original

4189 Les gens l'ont consulté

Cet article présente principalement l'exemple d'implémentation d'un salon de discussion HTML5-WebSocket, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

La méthode de mise en œuvre d'un salon de discussion sur une page Web traditionnelle consiste à demander au serveur d'obtenir des informations de discussion pertinentes à intervalles réguliers. Cependant, la fonction websocket apportée par HTML5 a modifié cette méthode. Étant donné que Websocket permet de maintenir la connexion pour l'interaction des données après la connexion au serveur, le serveur peut envoyer activement les données correspondantes au client. Pour le traitement HTML5, il vous suffit de traiter les données reçues dans l'événement de réception du websocket après la création de la connexion. Expérimentons la fonction que le serveur peut envoyer activement au client en implémentant une salle de discussion.

Fonction

Une simple salle de discussion a principalement les fonctions suivantes :

1) Inscription

L'inscription doit gérer plusieurs choses, notamment l'obtention d'une liste de tous les utilisateurs du serveur actuel une fois l'inscription terminée, et le service envoyant les utilisateurs actuellement enregistrés avec succès à d'autres utilisateurs en ligne.

2) Envoyer un message

Le serveur envoie le message actuellement reçu aux autres utilisateurs en ligne

３) Quitter

Le serveur informe les autres utilisateurs de l'utilisateur déconnecté

L'aperçu de la fonction terminée de la salle de discussion est le suivant :

Code serveur C#

Le code côté serveur n'a besoin que de définir quelques méthodes pour plusieurs fonctions, à savoir l'inscription, l'obtention d'autres utilisateurs et l'envoi d'informations. Le code spécifique est le suivant :

/// <summary>

    /// Copyright © henryfan 2012        

    ///Email:   henryfan@msn.com    

    ///HomePage:    http://www.ikende.com       

    ///CreateTime:  2012/12/7 21:45:25

    /// </summary>

    class Handler

    {

        public long Register(string name)

        {

            

            TcpChannel channel = MethodContext.Current.Channel;

            Console.WriteLine("{0} register name:{1}", channel.EndPoint, name);

            channel.Name = name;

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = name;

            user.ID = channel.ClientID;

            user.IP = channel.EndPoint.ToString();

            channel.Tag = user;

            msg.type = "register";

            msg.data = user;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    item.Send(msg);

            }

            return channel.ClientID;

        }

        public IList<User> List()

        {

            TcpChannel channel = MethodContext.Current.Channel;

            IList<User> result = new List<User>();

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    result.Add((User)item.Tag);

            }

            return result;

        }

        public void Say(string Content)

        {

            TcpChannel channel = MethodContext.Current.Channel;

            JsonMessage msg = new JsonMessage();

            SayText st = new SayText();

            st.Name = channel.Name;

            st.ID = channel.ClientID;

            st.Date = DateTime.Now;

            st.Content = Content;

            st.IP = channel.EndPoint.ToString();

            msg.type = "say";

            msg.data = st;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                item.Send(msg);

            }
        }
    }

Copier après la connexion

Seul le code simple ci-dessus est nécessaire pour compléter la fonction du serveur de salle de discussion. Pour la sortie de l'utilisateur, le code spécifique peut. être traité via l'événement de libération de connexion. :

protected override void OnDisposed(object sender, ChannelDisposedEventArgs e)

        {

            base.OnDisposed(sender, e);

            Console.WriteLine("{0} disposed", e.Channel.EndPoint);

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = e.Channel.Name;

            user.ID = e.Channel.ClientID;

            user.IP = e.Channel.EndPoint.ToString();

            msg.type = "unregister";

            msg.data = (User)e.Channel.Tag;

            foreach (TcpChannel item in this.Server.GetOnlines())

            {

                if (item != e.Channel)

                    item.Send(msg);

            }

        }

Copier après la connexion

De cette façon, le code côté serveur pour le chat a été complété.

Code JavaScript

La première chose à faire pour le code html5 est de se connecter au serveur Le code javascript pertinent est le suivant :

function connect() {

            channel = new TcpChannel();

            channel.Connected = function (evt) {

                callRegister.parameters.name = $(&#39;#nikename&#39;).val();

                channel.Send(callRegister, function (result) {

 

                    if (result.status == null || result.status == undefined) {

                        $(&#39;#dlgConnect&#39;).dialog(&#39;close&#39;);

                        registerid = result.data;

                        list();

                    }

                });

 

            };

            channel.Disposed = function (evt) {

                $(&#39;#dlgConnect&#39;).dialog(&#39;open&#39;);

            };

            channel.Error = function (evt) {

                alert(evt);

            };

            channel.Receive = function (result) {

                if (result.type == "register") {

                    var item = getUser(result.data);

                    $(item).appendTo($(&#39;#lstOnlines&#39;));

                }

                else if (result.type == &#39;unregister&#39;) {

                    $(&#39;#user_&#39; + result.data.ID).remove();

                }

                else if (result.type == &#39;say&#39;) {

                    addSayItem(result.data);

                }

                else {

                }

            }

            channel.Connect($(&#39;#host&#39;).val());

        }

Copier après la connexion

Utilisez le numéro du pool de rappel de réception pour gérer différents messages. Si les informations d'enregistrement d'autres utilisateurs sont reçues, les informations de l'utilisateur sont ajoutées à la liste si les informations de sortie d'autres utilisateurs sont reçues. , les informations utilisateur sont ajoutées à la liste. La liste des utilisateurs est supprimée ; le message reçu peut être directement ajouté à la boîte d'affichage du message. Avec l'aide de jquery, les événements ci-dessus deviennent très simples.

Processus d'appel d'enregistrement des utilisateurs :

var callRegister = { url: &#39;Handler.Register&#39;, parameters: { name: &#39;&#39;} };

        function register() {

            $(&#39;#frmRegister&#39;).form(&#39;submit&#39;, {

                onSubmit: function () {

                    var isValid = $(this).form(&#39;validate&#39;);

                    if (isValid) {

                        connect();

                    }

                    return false;

                }

            });

        }

Copier après la connexion

Processus d'obtention de la liste des utilisateurs en ligne :

var callList = { url: &#39;Handler.List&#39;, parameters: {} };

        function list() {

            channel.Send(callList, function (result) {

                $(&#39;#lstOnlines&#39;).html(&#39;&#39;);

                for (var i = 0; i < result.data.length; i++) {

                    var item = getUser(result.data[i]);

                    $(item).appendTo($(&#39;#lstOnlines&#39;));

                }

            });

        }

Copier après la connexion

Le processus d'envoi d'un message :

var callSay = { url: &#39;Handler.Say&#39;, parameters: {Content:""} }

        function Say() {

            callSay.parameters.Content = mEditor.html();

            mEditor.html(&#39;&#39;);

            channel.Send(callSay);

            $(&#39;#content1&#39;)[0].focus();

        }

Copier après la connexion

Téléchargement du code : démo

Résumé

Après le code Après l'encapsulation, le traitement du websocket devient très simple. Si vous êtes intéressé, vous pouvez étendre ce code pour créer une salle de discussion avec plus de fonctions, comme le regroupement de salles de discussion, l'envoi d'informations et le partage d'images, etc.

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!