网页版在线聊天室

引言

实现网页版的在线聊天室的方法有很多，在没有来到HTML5之前，常见的有：定时轮询、长连接+长轮询、基于第三方插件（如FLASH的Socket），而如果是HTML5，则比较简单，可以直接使用WebSocket，当然HTML5目前在PC端并没有被所有浏览器支持，所以我的这个聊天室仍是基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室，这个聊天室其实是我上周周末完成的，功能简单，可能有些不足，但可以满足在线即时聊天需求，分享也是给大家提供一个思路，大家可以基于此来实现更好的在线即时聊天工具。

聊天室功能简介：

支持多人进入同一个聊天室聊天；

进入即离线均会自动生成通知信息显示在聊天室中，这样聊天的人们就知道谁进来了谁离开了；

实时显示在线人员表列；

无需数据库支持，全部存在内存中，当然有条件的可以采用分布式缓存或加一个数据库来存，这里演示就是用内存来存了。

下面就开始分享我的代码，由于采用原生的JS及AJAX，所以简单易懂，代码分别WEB前端及服务端（有点废话了）

WEB前端源代码如下：(ChatPage.html)




    
    
    
 


    
        
            
            
        
        
            
                欢迎进入梦在旅途的网页即时在线大众聊天室 - www.zuowenjun.cn：
            
            
                当前在线人员
            
        
        
            
                
                
            
            
                
                    
                
            
        
        
            
                聊天妮称：
                
                
                输入内容：

代码很简单，并都有注释，在此就不作说明了，如果有疑问欢迎在下方评论。

服务端（ChatHandler.ashx）　

<%@ WebHandler Language="C#" Class="ChatHandler" %>
 
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Serialization;
using System.Threading;
using System.Collections.Concurrent;
 
public class ChatHandler : IHttpHandler
{
 
    private class Msg
    {
        public string name { get; set; }
        public string sendtime { get; set; }
        public string content { get; set; }
        public string readednams { get; set; }
        public int readedCount { get; set; }
        public string type { get; set; }
    }
 
    private static List msgs = new List();
    private static ReaderWriterLockSlim rwLock = new ReaderWriterLockSlim();
    private static object syncObject = new object(),syncObject1 = new object();
    private static List onLineNames = new List();
 
    public void ProcessRequest(HttpContext context)
    {
        string chatName = context.Request.Form["name"];
        string msg = context.Request.Form["msg"];
        string actionName = context.Request.Form["action"];
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
 
        object responseObject = null;
 
        switch (actionName)
        {
            case "receive":
                {
                    responseObject = GetNewMessages(chatName);
                    break;
                }
            case "send":
                {
                    responseObject = SendMessage(chatName, msg, "normal");
                    break;
                }
            case "on":
            case "off":
                {
                    responseObject = SetChatStatus(chatName, actionName);
                    break;
                }
            case "onlines":
                {
                    responseObject = onLineNames;
                    break;
                }
        }
 
        context.Response.ContentType = "text/json";
        context.Response.Write(jsSerializer.Serialize(responseObject));
 
    }
 
    private object SetChatStatus(string chatName, string status)
    {
        if (status == "on")
        {
            if (onLineNames.Exists(s => s == chatName))
            {
                return new { success = false, info = "该聊天妮称已经存在，请更换一个名称吧！" };
            }
            lock (syncObject1)
            {
                onLineNames.Add(chatName);
            }
            SendMessage(chatName, "大家好，我进入聊天室了！", status);
            return new { success = true, info = string.Empty };
        }
        else
        {
            lock (syncObject1)
            {
                onLineNames.Remove(chatName);
            }
            SendMessage(chatName, "再见，我离开聊天室了！", status);
            return new { success = true, info = string.Empty };
        }
    }
 
    /// 
    /// 获取未读的新消息
    /// 
    /// 
    /// 
    private object GetNewMessages(string chatName)
    {
        //第一种：循环处理
        while (true)
        {
 
            var newMsgs = msgs.Where(m => m.name != chatName && !(m.readednams ?? "").Contains(chatName)).OrderBy(m => m.sendtime).ToList();
            if (newMsgs != null && newMsgs.Count() > 0)
            {
                lock (syncObject)
                {
                    newMsgs.ForEach((m) =>
                    {
                        m.readednams += chatName + ",";
                        m.readedCount++;
                    });
                    int chatNameCount = onLineNames.Count();
                    msgs.RemoveAll(m => m.readedCount >= chatNameCount);
                }
 
                return new { success = true, msgs = newMsgs };
            }
 
            Thread.Sleep(1000);
        }
 
 
        //第二种方法，采用自旋锁
        //List newMsgs = null;
        //SpinWait.SpinUntil(() =>
        //{
        //    newMsgs = msgs.Where(m => m.name != chatName && !(m.readednams ?? "").Contains(chatName)).OrderBy(m => m.sendtime).ToList();
        //    return newMsgs.Count() > 0;
        //}, -1);
 
        //rwLock.EnterWriteLock();
        //newMsgs.ForEach(m =>
        //{
        //    m.readednams += chatName + ",";
        //    m.readedCount++;
        //});
        //rwLock.ExitWriteLock();
        //return new { success = true, msgs = newMsgs };
    }
 
    /// 
    ///
    /// 
    /// 
    /// 
    /// 
    private object SendMessage(string chatName, string msg, string type)
    {
        var newMsg = new Msg() { name = chatName, sendtime = DateTime.Now.ToString("yyyy/MM/dd HH:mm"), content =HttpContext.Current.Server.HtmlEncode(msg), readednams = null, type = type };
        //rwLock.EnterWriteLock();
        lock (syncObject)
        {
            msgs.Add(newMsg);
        }
        //rwLock.ExitWriteLock();
        return new { success = true, msgs = new[] { newMsg } };
    }
 
 
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
 
}

代码也相对简单，实现原理主要是：