html websocket聊天,html5 websocket教程
在传统的网页实现聊天室的方法是通过每隔一段时间请求服务器获取相关聊天信息来实现，然而html5带来的求转发到功能改变这了这种方式。由于求转发到在连接服务器后允许保持连接来进行数据交互，因此服务器可以主动地向客户端发送相应的数据。对于html5的处理只需要在连接创建完成后在求转发到的接收事件中处理接收的数据即可。下面通过实现一个聊天室来体验一下服务器可以主动地向客户端发的功能。
功能
一个简单的聊天室主要有以下几个功能：
）注册
注册要处理几个事情，分别是注册完成后获取当前服务器所有用户列表，服务把当前注册成功的用户发送给其他在线的用户。
）发信息
服务器把当前接收的消息发送给在线的其他用户
）退出
服务器把断开的用户通知其他用户
聊天室完成的功能预览如下：
C#服务端代码
服务端的代码只需要针对几功能定义几个方法即可，分别是注册，获取其他用户和发送信息。具体代码如下：
///摘要///版权亨利范2012///邮箱：henryfan@msn.com///主页：http://www . iken de . com///创建时间：2012/12/7 21:45:25////摘要类处理程序{ public long Register(字符串名称){ TcpChannel channel=方法上下文.当前频道；控制台WriteLine(“{ 0 }”寄存器名称：{1}",通道。端点，名称);渠道名称=名称；JSON message msg=new JSON message()；User User=new User()；用户名称=名称；用户. ID=频道100 . ClientID用户IP=。通道端点。ToString()；渠道。标签=用户；msg.type= registermsg.data=用户；foreach(通道中的信道项服务器。GetOnlines()) { if (item！=通道)项。发送(味精)；}返回通道ClientID} public ilist用户列表(){ TcpChannel channel=方法上下文.当前频道；Ili stuser结果=new ListUser()；foreach(通道中的信道项服务器。GetOnlines()) { if (item！=通道)结果。添加((用户)项目。标签);}返回结果；} public void Say(字符串内容){ TcpChannel channel=方法上下文.当前频道；JSON message msg=new JSON message()；say text ST=new say text()；圣名=通道。姓名；st.ID=频道100 . ClientID圣日期=日期时间。现在；圣含量=内容；st.IP=频道端点。ToString()；msg . type= saymsg . data=stforeach(通道中的信道项服务器。GetOnlines()) { item .发送(味精)；} } } 只需要以上简单的代码就完成了聊天室服务端的功能，对于用户退出可以通过连接释放事件来做处理具体代码：
受保护的替代无效已释放(对象发送方，ChannelDisposedEventArgs e){ base .OnDisposed(发件人，e)；控制台WriteLine(“{ 0 }”已释放“，e .频道。端点)；JSON message msg=new JSON message()；User User=new User()；用户. Name=e .渠道。名字用户ID=e .频道。标识符用户IP=e .通道。端点。tostring()；msg.type= unregistermsg。数据=(用户)e .通道。标签；foreach (TcpChannel项目在此.服务器。GetOnlines()) { if (item！=电子通道)项目。发送(味精)；} } 这样聊天定的服务端代码就已经完成了。
JavaScript代码
对于html5代码首先要做的一件事就是连接到服务器，相关爪哇岛描述语言代码如下：
函数connect(){ channel=new TcpChannel()；渠道. connected=function(evt){调用寄存器。参数。name=$( # Nike name ).val()；渠道Send(callRegister，函数(结果){ if(结果。状态==null 结果。status==undefined){ $( # DLG连接).对话框("关闭");registerid=result . datalist()；} });};渠道disposed=function(evt){ $( # DLG连接).对话框("打开");};渠道。错误=函数(evt){ alert(evt)；};渠道receive=函数(结果){ if(结果。type== register ){ var item=getUser(result。数据)；$(项目)。appendTo($( # lstOnlines ))；} else if(结果。type== unregister ){ $( # user _ 结果。数据。身份证).移除();} else if(结果。type== say ){ addSayItem(result。数据)；} else { } }频道。连接($(#host ).val())；} 通过接收回调池数来处理不同消息的情况，如果是接收到其他用户的注册信息，则把用户信息添加到列表中；如果收到的其他用户的退出信息则在用户列表种移走；直接收到消息添加到消息显示框中即可。有框架的帮助以上事件都变得非常简单。
用户注册调用过程：
var callRegister={ url:处理程序注册，参数：{ name: } }；函数register() { $(#frmRegister ).form(submit ，{ on submit:function(){ var valid=$(this).表单(“验证”)；if(有效){ connect()；}返回false } })；} 获取在线用户列表过程：
var callList={ url:处理程序列表，参数：{ } };函数列表()频道.Send(callList，function(result){ $( # lstOnlines ).html(" ")；for(var I=0；我的结果。数据。长度；I){ var item=getUser(result。data[I])；$(项目)。appendTo($( # lstOnlines ))；} });} 发送消息过程：
var callSay={ url:处理程序说，参数：{内容： } }函数Say(){ call Say。参数。内容=冥想者。html()；冥想者。html()；渠道。发送(打电话说)；$(#content1)[0].焦点();} 代码下载：演示
总结
经过代码封装后求转发到的处理变得非常简单，如果你有兴趣完全可以在此代码上扩展出一个更多功能的聊到室，如聊天室分组，发送信息图片共享等等。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。