HTML5-WebSocket实现聊天室示例

在传统的网页实现谈天室的要领是通过每隔一段时刻哀求处事器获取相干谈天信息来实现，然而html5带来的websocket成果改变这了这种方法．因为websocket在毗连处事器后应承保持毗连来举办数据交互，因此处事器可以主动地向客户端发送响应的数据．对付html5的处理赏罚只必要在毗连建设完成后在websocket的receive变乱中处理赏罚吸取的数据即可.下面通过实现一个谈天室来体验一下处事器可以主动地向客户端发的成果．

成果

一个简朴的谈天室首要有以下几个成果：

１）注册

注册要处理赏罚几个工作，别离是注册完成后获取当前处事器全部用户列表，处事把当前注册乐成的用户发送给其他在线的用户．

２）发信息

处事器把当前吸取的动静发送给在线的其他用户

３）退出

处事器把断开的用户关照其他用户

谈天室完成的成果预览如下:

C#处事端代码

处事端的代码只必要针对几成果界说几个要领即可，别离是注册，获取其他用户和发送信息．详细代码如下:

/// <summary> /// Copyright © henryfan 2012 ///Email: henryfan@msn.com ///HomePage: ///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()); }

通过Receive回调池数来处理赏罚差异动静的环境，假如是吸取到其他用户的注册信息，则把用户信息添加到列表中；假如收到的其他用户的退出信息则在用户列表种移走；直吸取到动静添加到动静表现框中即可．有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($('#lstOnlines')); } }); }

发送动静进程:

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

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!