本篇文章主要介紹了HTML5-WebSocket實(shí)現(xiàn)聊天室示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

在傳統(tǒng)的網(wǎng)頁實(shí)現(xiàn)聊天室的方法是通過每隔一段時(shí)間請求服務(wù)器獲取相關(guān)聊天信息來實(shí)現(xiàn)，然而html5帶來的websocket功能改變這了這種方式．由于websocket在連接服務(wù)器后允許保持連接來進(jìn)行數(shù)據(jù)交互，因此服務(wù)器可以主動(dòng)地向客戶端發(fā)送相應(yīng)的數(shù)據(jù)．對于html5的處理只需要在連接創(chuàng)建完成后在websocket的receive事件中處理接收的數(shù)據(jù)即可.下面通過實(shí)現(xiàn)一個(gè)聊天室來體驗(yàn)一下服務(wù)器可以主動(dòng)地向客戶端發(fā)的功能．

功能

一個(gè)簡單的聊天室主要有以下幾個(gè)功能：

１）注冊

注冊要處理幾個(gè)事情，分別是注冊完成后獲取當(dāng)前服務(wù)器所有用戶列表，服務(wù)把當(dāng)前注冊成功的用戶發(fā)送給其他在線的用戶．

２）發(fā)信息

服務(wù)器把當(dāng)前接收的消息發(fā)送給在線的其他用戶

３）退出

服務(wù)器把斷開的用戶通知其他用戶

聊天室完成的功能預(yù)覽如下:

C#服務(wù)端代碼

服務(wù)端的代碼只需要針對幾功能定義幾個(gè)方法即可，分別是注冊，獲取其他用戶和發(fā)送信息．具體代碼如下:

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

只需要以上簡單的代碼就完成了聊天室服務(wù)端的功能，對于用戶退出可以通過連接釋放事件來做處理具體代碼：

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

這樣聊天定的服務(wù)端代碼就已經(jīng)完成了．

JavaScript代碼

對于html5代碼首先要做的一件事就是連接到服務(wù)器，相關(guān)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());            }

通過Receive回調(diào)池?cái)?shù)來處理不同消息的情況，如果是接收到其他用戶的注冊信息，則把用戶信息添加到列表中；如果收到的其他用戶的退出信息則在用戶列表種移走；直接收到消息添加到消息顯示框中即可．有jquery的幫助以上事件都變得非常簡單．

用戶注冊調(diào)用過程:

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($('#lstOnlines'));                    }                });            }

發(fā)送消息過程:

var callSay = { url: 'Handler.Say', parameters: {Content:""} }            function Say() {                callSay.parameters.Content = mEditor.html();                mEditor.html('');                channel.Send(callSay);                $('#content1')[0].focus();            }

代碼下載：demo

總結(jié)

經(jīng)過代碼封裝后websocket的處理變得非常簡單，如果你有興趣完全可以在此代碼上擴(kuò)展出一個(gè)更多功能的聊到室，如聊天室分組，發(fā)送信息圖片共享等等．