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

Exemple de code d'implémentation de la salle de discussion HTML5 WebSocket

黄舟

Libérer： 2017-03-13 17:22:03

original

3115 Les gens l'ont consulté

Cet article présente l'exemple de salle de discussion d'implémentation 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'une salle de discussion sur une page Web traditionnelle consiste à demander au serveur du service d'obtenir des informations de discussion pertinentes à intervalles réguliers. Cependant, la fonction websocket apportée par HTML5 a changé cela. 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 de la salle de discussion est la suivante :

Exemple de code d'implémentation de la salle de discussion HTML5 WebSocket

C# Code côté serveur

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:    //m.sbmmt.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é.

JavaScriptCode

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 d'autres utilisateurs ; sont reçus Les informations de sortie de l'utilisateur seront supprimées de la liste des utilisateurs ; recevez simplement le message directement et ajoutez-le à la boîte d'affichage du message. Avec l'aide de jquery, les événements ci-dessus deviennent très simples.

Inscription des utilisateursProcessus d'appel :

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 du 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

Résumé

Encapsulé par code Après cela, le traitement de 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, telles que le regroupement de salles de discussion, l'envoi d'informations et le partage de photos, 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!