星空网 > 软件开发 > ASP.net

分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

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

聊天室功能简介:

1。支持多人进入同一个聊天室聊天; 

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

3。实时显示在线人员表列;

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

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

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

<!DOCTYPE html><html 

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

服务端(ChatHandler.ashx) 

<%@ WebHandler Language="C#" %>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<Msg> msgs = new List<Msg>();  private static ReaderWriterLockSlim rwLock = new ReaderWriterLockSlim();  private static object syncObject = new object(),syncObject1 = new object();  private static List<string> onLineNames = new List<string>();  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 };    }  }  /// <summary>  /// 获取未读的新消息  /// </summary>  /// <param name="chatName"></param>  /// <returns></returns>  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<Msg> 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 };  }  /// <summary>  ///   /// </summary>  /// <param name="chatName"></param>  /// <param name="msg"></param>  /// <returns></returns>  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;    }  }}

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

1。聊天消息:循环获取未读的消息,在取出读的消息同时,将其标识为已读,全部已读的消息则删除;--我这里采用了两种方法,第二种方法被注释掉了,大家可以取消注释试试,也是不错的,比第一种更直观,建议使用;

2。发送消息:实例化一个消息实例并加入到聊天消息集合中;

3。状态切换:上线则加入到在线人员集合中,并生成一条上线消息放入到聊天消息集合中,离线则从在线人员集合中移除该人员信息,并生成一条离线消息放入聊天消息集合中;

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

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

 张三:

分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

李四:

分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

小美:

分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

如果觉得不错的话,给个推荐吧,你的支持是推动我不断前进的动力及写作的源泉,我一直坚持:知识在于分享,分享的同时自己也在成长,希望与大家共同成长,谢谢!




原标题:分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流