HTML5-WebSocket実装チャットルームの例

この記事では主に HTML5-WebSocket チャット ルームの実装例を紹介します。興味のある方は参考にしてください。

従来のWebページにチャットルームを実装する方法は、サーバーに定期的に関連するチャット情報の取得を要求することでしたが、HTML5によってもたらされたWebSocket機能により、この方法が変更されました。 WebSocket を使用すると、サーバーに接続した後もデータ対話のための接続を維持できるため、サーバーは対応するデータをクライアントにアクティブに送信できます。 HTML5の処理では、接続が確立された後、WebSocketの受信イベントで受信したデータを処理するだけで、チャットルームを実装することでサーバーがクライアントに能動的に送信できる機能を体験してみましょう。

機能

シンプルなチャットルームには主に次の機能があります:

1) 登録

登録ではいくつかのことを処理する必要があります。つまり、登録が完了した後、すべてのユーザーのリストを取得します。現在のサーバー、サービス 現在登録されているユーザーを他のオンライン ユーザーに送信します。

２）メッセージを送信

サーバーは現在受信しているメッセージをオンラインの他のユーザーに送信します

３）終了

サーバーは切断されたユーザーを他のユーザーに通知します

チャットルームの完成した機能は次のとおりです

C# サーバー コード

サーバー コードでは、登録、他のユーザーの取得、情報の送信など、いくつかの機能に対していくつかのメソッドを定義するだけで済みます。特定のコードは次のとおりです:

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

            }
        }
    }

ユーザー終了の場合、チャット ルーム サーバーの機能を完了するには、上記の簡単なコードのみが必要です:

。

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

            }

        }

そんなチャットサービスの 終了コードが完成しました。

JavaScript コード

HTML5 コードで最初に行うことは、サーバーに接続することです。関連する JavaScript コードは次のとおりです。

function connect() {

            channel = new TcpChannel();

            channel.Connected = function (evt) {

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

                channel.Send(callRegister, function (result) {

 

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

                        $('#dlgConnect').dialog('close');

                        registerid = result.data;

                        list();

                    }

                });

 

            };

            channel.Disposed = function (evt) {

                $('#dlgConnect').dialog('open');

            };

            channel.Error = function (evt) {

                alert(evt);

            };

            channel.Receive = function (result) {

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

                    var item = getUser(result.data);

                    $(item).appendTo($('#lstOnlines'));

                }

                else if (result.type == 'unregister') {

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

                }

                else if (result.type == 'say') {

                    addSayItem(result.data);

                }

                else {

                }

            }

            channel.Connect($('#host').val());

        }

受信コールバック プールの数を使用して、さまざまなメッセージを処理します。他のユーザーの登録情報を受信した場合、そのユーザー情報はリストに追加されます。他のユーザーの終了情報を受信した場合、メッセージを直接受信した場合はユーザーリストから削除されます。メッセージ表示ボックスに追加されます。 jquery を使用すると、上記のイベントが非常に簡単になります。

ユーザー登録呼び出し処理:

var callRegister = { url: 'Handler.Register', parameters: { name: ''} };

        function register() {

            $('#frmRegister').form('submit', {

                onSubmit: function () {

                    var isValid = $(this).form('validate');

                    if (isValid) {

                        connect();

                    }

                    return false;

                }

            });

        }

オンラインユーザーリスト取得処理:

var callList = { url: 'Handler.List', parameters: {} };

        function list() {

            channel.Send(callList, function (result) {

                $('#lstOnlines').html('');

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

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

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

                }

            });

        }

メッセージ送信処理:

var callSay = { url: 'Handler.Say', parameters: {Content:""} }

        function Say() {

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

            mEditor.html('');

            channel.Send(callSay);

            $('#content1')[0].focus();

        }

コードダウンロード:demo

概要

コードのカプセル化後WebSocket の処理は非常に簡単になっていますので、興味があれば、このコードを拡張して、チャット ルームのグループ化、情報の送信、画像の共有などの機能を備えたチャット ルームを作成できます。

以上がHTML5-WebSocket実装チャットルームの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。