Beispiel für einen HTML5-WebSocket-Implementierungs-Chatroom-H5-Tutorial-php.cn

Beispiel für einen HTML5-WebSocket-Implementierungs-Chatroom

巴扎黑

Freigeben： 2017-05-21 15:10:48

Original

4190 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Beispiel der HTML5-WebSocket-Chatroom-Implementierung vorgestellt, das einen gewissen Referenzwert hat.

Die Methode zur Implementierung eines Chatrooms auf einer herkömmlichen Webseite besteht darin, den Server in regelmäßigen Abständen aufzufordern, relevante Chat-Informationen abzurufen. Die von HTML5 bereitgestellte Websocket-Funktion hat diese Methode jedoch geändert. Da WebSocket die Aufrechterhaltung der Verbindung für die Dateninteraktion nach der Verbindung mit dem Server ermöglicht, kann der Server aktiv entsprechende Daten an den Client senden. Für die HTML5-Verarbeitung müssen Sie die empfangenen Daten nur im Empfangsereignis des Websockets verarbeiten, nachdem die Verbindung hergestellt wurde. Erleben Sie die Funktion, die der Server durch die Implementierung eines Chatrooms aktiv an den Client senden kann.

Funktion

Ein einfacher Chatroom hat hauptsächlich die folgenden Funktionen:

1) Registrierung

Die Registrierung muss mehrere Dinge erledigen, darunter das Erhalten einer Liste aller Benutzer des aktuellen Servers nach Abschluss der Registrierung und das Senden der aktuell erfolgreich registrierten Benutzer an andere Online-Benutzer durch den Dienst.

2) Eine Nachricht senden

Der Server sendet die aktuell empfangene Nachricht online an andere Benutzer

３) Beenden

Der Server benachrichtigt andere Benutzer über den getrennten Benutzer

Die fertige Funktionsvorschau des Chatrooms sieht wie folgt aus:

C#-Servercode

Der serverseitige Code muss nur einige Methoden für mehrere Funktionen definieren, nämlich Registrierung, Gewinnung anderer Benutzer und Senden von Informationen. Der spezifische Code lautet wie folgt:

/// <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);

            }
        }
    }

Nach dem Login kopieren

Um die Funktion des Chatroom-Servers abzuschließen, kann der spezifische Code verwendet werden durch das Verbindungsfreigabeereignis verarbeitet werden:

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);

            }

        }

Nach dem Login kopieren

Auf diese Weise wurde der serverseitige Code für den Chat vervollständigt.

JavaScript-Code

Für den HTML5-Code müssen Sie zunächst eine Verbindung zum Server herstellen. Der relevante Javascript-Code lautet wie folgt:

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

        }

Nach dem Login kopieren

Verwenden Sie die Rückrufpoolnummer, um verschiedene Nachrichten zu bearbeiten. Wenn die Registrierungsinformationen anderer Benutzer empfangen werden, werden die Benutzerinformationen zur Liste hinzugefügt , werden die Benutzerinformationen zur Liste hinzugefügt. Die empfangene Nachricht kann direkt zum Nachrichtenanzeigefeld hinzugefügt werden. Mit Hilfe von jquery werden die oben genannten Ereignisse sehr einfach.

Anrufprozess für die Benutzerregistrierung:

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;

                }

            });

        }

Nach dem Login kopieren

Online-Benutzerlistenprozess erhalten:

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;));

                }

            });

        }

Nach dem Login kopieren

Der Vorgang des Sendens einer Nachricht:

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

        }

Nach dem Login kopieren

Code-Download: Demo

Zusammenfassung

Nach der Kapselung wird die Verarbeitung von Websocket sehr einfach. Wenn Sie interessiert sind, können Sie diesen Code erweitern, um einen Chatroom mit weiteren Funktionen zu erstellen, z. B. Chatroom-Gruppierung, Senden von Informationen und Bildfreigabe usw.

Das obige ist der detaillierte Inhalt vonBeispiel für einen HTML5-WebSocket-Implementierungs-Chatroom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!