笔者开发的WebOS中已经包含了一个功能相对比较齐全的WebIM,这个系列的文章就是介绍如何开发出功能类似的WebIM,在文章开始前,先介绍一下相关的技术:
1.Comet
Comet 是一种新的 Web 应用架构。基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程序推送数据,而不需要客户端显式的发出请求。Comet 架构非常适合事件驱动的 Web 应用,以及对交互性和实时性要求很强的应用,如股票交易行情分析、聊天室和 Web 版在线游戏等。
在.NET要实现Comet就要用到IHttpAsyncHandler,在开始阅读文章前,建议先了解一下IHttpAsyncHandler。
2.Lesktop
Lesktop是一款用于开发RIA网站的开源JS界面库,Lesktop提供了一个功能强大的可视化开发工具帮助您快速的开发RIA网站。这个系列介绍的WebIM的前台UI将使用Lesktop来开发。
接下来,将开始今天的主题,开发一个简单的WebIM,这个WebIM将使用Comet技术,从而避免在客户端和服务端轮询,提高WebIM的性能(目前主要实现能够聊天,其他功能会在以后不断完善)。客户端界面在这就不详细介绍了,用Lesktop拖拖控件就可以了,效果如下:
1.基本思路
Comet便是指服务器推技术。它的实现方式是在浏览器与服务器之间建立一个长连接,待获得消息之后立即返回。否则持续等待,直至超时。客户端得到消息或超时之后,又会立即建立另一个长连接。Comet技术的最大优势,自然就是很高的即使性。在.NET中实现这种方式并不困难,用IHttpAsyncHandler即可。
接收消息的流程:
发送消息流程:
发送消息和添加监听器将由一个类型为MessageManagement对象来负责,
添加监听器代码如下:
/// <summary> /// 添加消息监听器,如果查找到符合监听器条件的消息,返回false,此时不会添加监听器 /// 如果没有查找到符合监听器条件的消息,返回true,此时监听器将被添加到m_Listeners中 /// </summary> public bool AddListener(String receiver, String sender, Nullable<DateTime> from, WebIM_AsyncResult asynResult) { MessageListener listener = new MessageListener(receiver, sender, from, asynResult); lock (m_Lock) { if (!m_Listeners.ContainsKey(receiver)) { m_Listeners.Add(receiver, new List<MessageListener>()); } List<MessageListener> listeners = m_Listeners[receiver] as List<MessageListener>; //查找消息 List<Message> messages = Find(receiver, sender, from); if (messages.Count == 0) { //插入监听器 listeners.Add(listener); } else { //发送消息 listener.Send(messages); } return messages.Count == 0; } }
发送消息代码如下:
/// <summary> /// 插入新的消息,插入消息后将查询m_Listeners中是否有符合条件的监听器,如存在,同时将消息发送出去 /// </summary> public Message NewMessage(String receiver, String sender, DateTime createdTime, String content) { lock (m_Lock) { Message message = new Message(sender, receiver, content, createdTime, ++m_MaxKey); SQLiteCommand cmd = new SQLiteCommand( "insert into Message (Receiver,Sender,Content,CreatedTime,Key) values (?,?,?,?,?)", m_Conn ); cmd.Parameters.Add("Receiver", DbType.String).Value = message.Receiver; cmd.Parameters.Add("Sender", DbType.String).Value = message.Sender; cmd.Parameters.Add("Content", DbType.String).Value = message.Content; cmd.Parameters.Add("CreatedTime", DbType.DateTime).Value = message.CreatedTime; cmd.Parameters.Add("Key", DbType.Int64).Value = message.Key; cmd.ExecuteNonQuery(); List<Message> messages = new List<Message>(); messages.Add(message); if (m_Listeners.ContainsKey(receiver)) { List<MessageListener> listeners = m_Listeners[receiver] as List<MessageListener>; List<MessageListener> removeListeners = new List<MessageListener>(); foreach (MessageListener listener in listeners) { if ((listener.Sender == "*" || String.Compare(listener.Sender, sender, true) == 0) && (listener.From == null || message.CreatedTime > listener.From)) { listener.Send(messages); removeListeners.Add(listener); System.Threading.ThreadPool.QueueUserWorkItem(new System.Threading.WaitCallback(listener.Complete)); } } foreach (MessageListener listener in removeListeners) { //移除监听器 listeners.Remove(listener); } } return message; } }
2.使用IHttpAsyncHandler实现Comet
IHttpAsyncHandler的介绍可以查阅下msdn,以下是接收消息的源代码,主要是重写BeginProcessRequest和EndProcessRequest:
public class WebIM_ReceiveHandler : IHttpAsyncHandler { public WebIM_ReceiveHandler() { } HttpContext m_Context = null; IAsyncResult IHttpAsyncHandler.BeginProcessRequest(HttpContext context, AsyncCallback cb, Object extraData) { m_Context = context; System.IO.Stream inputStream = context.Request.InputStream; Byte[] buffer = new Byte[inputStream.Length]; inputStream.Read(buffer, 0, (int)inputStream.Length); string content = context.Request.ContentEncoding.GetString(buffer); Hashtable data = Utility.ParseJson(content) as Hashtable; WebIM_AsyncResult asyncResult = new WebIM_AsyncResult(cb, extraData); Nullable<DateTime> from = data.ContainsKey("From") ? new Nullable<DateTime>((DateTime)data["From"]) : null; if (!MessageManagement.Instance.AddListener(data["Receiver"] as string, data["Sender"] as string, from, asyncResult)) { //已有消息,发送消息并结束链接 asyncResult.Complete(null); } return asyncResult; } void IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) { //将消息发送到客户端 WebIM_AsyncResult asyncResult = result as WebIM_AsyncResult; asyncResult.Send(m_Context); } void IHttpHandler.ProcessRequest(HttpContext context) { } bool IHttpHandler.IsReusable { get { return true; } } } public class WebIM_AsyncResult : IAsyncResult { AsyncCallback m_AsyncCallback = null; object m_Data = null; bool m_IsCompleted = false; public WebIM_AsyncResult(AsyncCallback callback, Object extraData) { m_Data = extraData; m_AsyncCallback = callback; } bool IAsyncResult.IsCompleted { get { return m_IsCompleted; } } bool IAsyncResult.CompletedSynchronously { get { return false; } } WaitHandle IAsyncResult.AsyncWaitHandle { get { return null; } } Object IAsyncResult.AsyncState { get { return m_Data; } } StringBuilder m_Cache = new StringBuilder(); public void Write(object content) { m_Cache.Append(content.ToString()); } public void Send(HttpContext context) { context.Response.Write(m_Cache.ToString()); } public void Complete(object data) { m_AsyncCallback(this); m_IsCompleted = true; } }
3.客户端接收消息
客户端接收消息并不复杂,只需要发送请求,返回后在发送另一个请求即可,代码如下:
function Receive() { var data = { Receiver: User, Sender: Peer, From: m_From }; function Receive_Error(ex) { alert(ex); m_ErrorCount++; if (m_ErrorCount < 5) { //发送下一个请求 setTimeout(Receive, 1000); } } function Receive_Callback(xml, text) { m_ErrorCount = 0; //将JSON转成数据 var ret = System.ParseJson(text); //显示消息 for (var i in ret.Messages) { m_MsgPanel.AddMessage(ret.Messages[i]); } if (ret.Messages.length > 0) { m_From = ret.Messages[ret.Messages.length - 1].CreatedTime; } //发送下一个请求 setTimeout(Receive, 50); } System.Post(Receive_Callback, Receive_Error, "recevie.aspx", System.RenderJson(data)); }
WebIM源代码(注意:开发时起始页为WebIM_Dev.htm,直接打开起始页为WebIM.htm)
一个简单的WebIM就先介绍到这里,如果您有任何问题,可以通过WebIM与我联系。
最新评论