这篇文章给大家讲讲怎么用HTML5里的WebSocket搞出个简单聊天室。以前的网页聊天都是定期找服务器拿消息，但WebSocket不一样，它能让客户端和服务端直接连上，两边都能发东西，提高了聊天气氛。咱就用个实例来说说WebSocket咋用，希望你能有所收获。
注册用户和广播功能
在聊天室里，先搞定用户注册和消息传递这两件大事儿！当有人注册了，得马上看看大家是不是都在，然后把新朋友的信息告诉大家。这样做，每个观众就都知道现在有多少小伙伴在，还能热烈欢迎新人的到来！用WebSocket这个神器，服务器就能主动发消息给客户端了，聊天就是这么实时方便！
消息发送与接收
讲到发消息收消息的事儿，那就得说说这个WebSocket了。你知道吗？每当有人发消息，这服务器可就忙坏了，要把它发送出去让所有在线的人都看得见，就像搞个大群聊天一样热闹！除此之外，这服务器还得处理收到的消息，保证它们能准确地传送给想要收看的人。有了这么快的速度和实时通讯功能，WebSocket在聊天室里可是独占鳌头！
处理用户断开连接
聊天室不只是注册信息和传讯要管呢,还要应对断线问题。比如一个朋友离开或者网络不好掉线了,这时候服务器要立马提醒大家他走了,并且把他在白名单里删掉。这么做才能让我们知道谁在,聊天室才能正常运作起来呀。
////// Copyright © henryfan 2012 ///Email: henryfan@msn.com ///HomePage: http://www.php.cn/ ///CreateTime: 2012/12/7 21:45:25 /// 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 List() { TcpChannel channel = MethodContext.Current.Channel; IList result = new List(); 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); } } }
C#服务端代码示例
服务端代码就得弄几个简易的方法搞定注册啊、查别人信息啊或者发信息啥的功能。用C#写能顺手地跟前端WebSocket聊天儿，也就搞好了各种聊天儿室要用到的东西了。
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前端代码示例
前端代码搞的就是跟服务器连个WebSocket聊天，然后处理下咱们收到的那些消息。用JavaScript写点小逻辑，就能搞定各种类型的消息显示和操作了。再加上像 jQuery这种小助手，处理事件啥的就简单多了，交互起来特流畅那种~
扩展更多功能
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());
}
封装过之后，WebSocket用起来特方便了。如果你想做那种聊天室软件，那就更好办，可以添加更多好玩儿的功能，比如说分组聊天、分享图片之类的。这个WebSocket可不得了，它是个强有力的即时通信工具，以后会有越来越多的地方用到它！
这篇文章告诉大家如何用HTML5-WebSocket做一个聊天室，让我们更清楚地明白WebSocket这技术到底能干。要是你跟我一样，对即时通讯和前后端交流有兴趣，那就动手试试搭建个简陋的聊天室，相信你会爱上WebSocket给我们生活带来的便利和工作效率提升！
结语及展望
总之，HTML5-WebSocket给咱带来了全新的前后端交流方法，对于制作互动效果棒棒哒的网页软件至关重要。看了这篇文章在聊室里的比喻，你应该也大概了解了WebSocket在网页设计中是怎么用的，以及它大致的原理是啥。以后，随着网页科技越来越成熟，咱们还会有更多像WebSocket这样有意思的新玩意儿出现。
var callRegister = { url: 'Handler.Register', parameters: { name: ''} };
function register() {
$('#frmRegister').form('submit', {
onSubmit: function () {
var isValid = $(this).form('validate');
if (isValid) {
connect();
}
return false;
}
});
}
希望我这篇文章能给你些灵感，帮到你！想想要用 HTML5-WebSocket 打造什么样的好玩功能？快跟大家说说你的点子！
评论0