网页版在线聊天室

知道91 | Web前端 | 2015-11-21 | 阅读:11117

引言

实现网页版的在线聊天室的方法有很多,在没有来到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;
            }
        }
     
    }
    

    代码也相对简单,实现原理主要是:

    • 聊天消息:循环获取未读的消息,在取出读的消息同时,将其标识为已读,全部已读的消息则删除;--我这里采用了两种方法,第二种方法被注释掉了,大家可以取消注释试试,也是不错的,比第一种更直观,建议使用;
    • 发送消息:实例化一个消息实例并加入到聊天消息集合中;
    • 状态切换:上线则加入到在线人员集合中,并生成一条上线消息放入到聊天消息集合中,离线则从在线人员集合中移除该人员信息,并生成一条离线消息放入聊天消息集合中;

    注意事项,由于采用了全局静态集合,所以线程同步比较重要。

    最终的实现效果展示如下:

    网页聊天

    如果觉得不错的话,希望给我一个关注吧。