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

聊天室功能简介：

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

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         html, body {
  8.             margin: 0px;
  9.             padding: 0px;
  10.             width: 100%;
  11.             height: 100%;
  12.             background-color: #f8f7f7;
  13.             font-family: arial,sans-serif;
  14.         }
  15.  
  16.         #layouttable {
  17.             margin:0px;
  18.             padding:0px;
  19.             width:100%;
  20.             height:100%;
  21.             border:2px solid green;
  22.             border-collapse:collapse;
  23.             min-width:800px;
  24.         }
  25.  
  26.             #layouttable td {
  27.                 border: 1px solid green;
  28.             }
  29.  
  30.         .h100p {
  31.             height:100%;
  32.         }
  33.  
  34.         .midtr{height:auto;}
  35.             .midtr tr td {
  36.                 height: 100%;
  37.             }
  38.  
  39.         #chatmsgbox, #chatonlinebox {
  40.             background-color:white;
  41.             overflow-x: hidden;
  42.             overflow-y: auto;
  43.             overflow-wrap: break-word;
  44.             height: 100%;
  45.         }
  46.  
  47.         #chatonlinebox {
  48.             background-color:#f5d0a8;
  49.         }
  50.  
  51.         .rc, .sd {
  52.             overflow:hidden;
  53.         }
  54.  
  55.          .rc p {
  56.             float: left;
  57.             color: green;
  58.         }
  59.             .sd p {
  60.                 float: right;
  61.                 color: orange;
  62.             }
  63.     </style>
  64.  
  65. </head>
  66. <body>
  67.     <table id="layouttable">
  68.         <colgroup>
  69.             <col style="width:auto" />
  70.             <col style="width: 200px;" />
  71.         </colgroup>
  72.         <tr style="height:30px; background-color:lightblue;color:yellow;">
  73.             <td>
  74.                 欢迎进入梦在旅途的网页即时在线大众聊天室 - www.zuowenjun.cn：
  75.             </td>
  76.             <td>
  77.                 当前在线人员
  78.             </td>
  79.         </tr>
  80.         <tr style="height:auto;" id="midtr">
  81.             <td>
  82.                 <div id="chatmsgbox">
  83.                 </div>
  84.             </td>
  85.             <td>
  86.                 <div id="chatonlinebox">
  87.                     <ul id="chatnames"></ul>
  88.                 </div>
  89.             </td>
  90.         </tr>
  91.         <tr style="height:50px;">
  92.             <td colspan="2">
  93.                 <label for="name">聊天妮称：</label>
  94.                 <input type="text" id="name" style="width:80px;" />
  95.                 <input type="button" id="btnsavename" value="确认进入" />
  96.                 <label for="msg">输入内容：</label>
  97.                 <input type="text" id="msg" style="width:400px;" />
  98.                 <input type="button" id="btnSend" value="发送消息" disabled="disabled" />
  99.             </td>
  100.         </tr>
  101.     </table>
  102.     <script type="text/javascript">
  103.         var chatName = null;
  104.         var oChatmsgbox, oMsg, oChatnames;
  105.         var ajaxforSend, ajaxforRecv;
  106.  
  107.         //页面加载初始化
  108.         window.onload = function () {
  109.             document.getElementById("btnsavename").onclick = function () {
  110.                 this.disabled = true;
  111.                 var oName = document.getElementById("name");
  112.                 oName.readOnly = true;
  113.                 document.getElementById("btnSend").disabled = false;
  114.                 //receiveMsg();
  115.                 setChatStatus(oName.value,"on");
  116.             }
  117.  
  118.             document.getElementById("btnSend").onclick = function () {
  119.                 sendMsg(oMsg.value);
  120.             };
  121.  
  122.             //init
  123.             oChatmsgbox = document.getElementById("chatmsgbox");
  124.             oMsg = document.getElementById("msg");
  125.             oChatnames = document.getElementById("chatnames");
  126.             ajaxforSend = getAjaxObject();
  127.             ajaxforRecv = getAjaxObject();
  128.         }
  129.  
  130.         //离开时提醒
  131.         window.onbeforeunload = function () {
  132.             event.returnValue = "您确定要退出聊天室吗？";
  133.         }
  134.  
  135.         //关闭时离线
  136.         window.onunload = function () {
  137.             setChatStatus(chatName, "off");
  138.         }
  139.  
  140.         //设置聊天状态：在线 OR 离线
  141.         function setChatStatus(name, status) {
  142.             callAjax(getAjaxObject(), "action=" + status + "&name=" + name, function (rs) {
  143.                 if (!rs.success) {
  144.                     alert(rs.info);
  145.                     return;
  146.                 }
  147.                 if (status == "on") {
  148.                     chatName = document.getElementById("name").value;
  149.                     setTimeout("receiveMsg()",500);
  150.                 }
  151.                 loadOnlineChatNames();
  152.             });
  153.         }
  154.  
  155.         //加载在线人员名称列表
  156.         function loadOnlineChatNames(){
  157.             callAjax(getAjaxObject(), "action=onlines", function (rs) {
  158.                 var lis = "";
  159.                 for(var i=0;i<rs.length;i++)
  160.                 {
  161.                     lis += "<li>"+ rs[i] +"</li>";
  162.                 }
  163.                 oChatnames.innerHTML = lis;
  164.             });
  165.         }
  166.  
  167.         //接收消息列表
  168.         function receiveMsg() {
  169.             callAjax(ajaxforRecv, "action=receive&name=" + chatName, function (rs) {
  170.                 if (rs.success) {
  171.                     showChatMsgs(rs.msgs, "rc");
  172.                 }
  173.                 setTimeout("receiveMsg()", 500);
  174.             });
  175.         }
  176.         //发送消息
  177.         function sendMsg(msg) {
  178.             callAjax(ajaxforSend, "action=send&name=" + chatName + "&msg=" + escape(msg), function (rs) {
  179.                 if (rs.success) {
  180.                     showChatMsgs(rs.msgs, "sd");
  181.                     oMsg.value = null;
  182.                     //alert("发送成功！");
  183.                 }
  184.             });
  185.         }
  186.  
  187.         //显示消息
  188.         function showChatMsgs(msgs, cssClass) {
  189.             var loadonline = false;
  190.             for (var i = 0; i < msgs.length; i++) {
  191.                 var msg = msgs[i];
  192.                 oChatmsgbox.innerHTML += "<div class='" + cssClass + "'><p>[" + msg.name + "] - " + msg.sendtime + " 说:<br/>" + msg.content + "</p></div>";
  193.                 if (msg.type == "on" || msg.type == "off")
  194.                 {
  195.                     loadonline = true;
  196.                 }
  197.             }
  198.             if (loadonline)
  199.             {
  200.                 loadOnlineChatNames();
  201.             }
  202.         }
  203.  
  204.         //调用AJAX
  205.         function callAjax(ajax, param, callback) {
  206.  
  207.             ajax.open("post", "ChatHandler.ashx", true);
  208.             ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  209.             ajax.onreadystatechange = function () {
  210.                 if (ajax.readyState == 4 && ajax.status == 200) {
  211.                     var json = eval("(" + ajax.responseText + ")");
  212.                     callback(json);
  213.                 }
  214.             };
  215.             ajax.send(param);
  216.         }
  217.  
  218.         //获取AJAX对象（XMLHttpRequest）
  219.         function getAjaxObject() {
  220.             var xmlhttp;
  221.             if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  222.                 xmlhttp = new XMLHttpRequest();
  223.             }
  224.             else {// code for IE6, IE5
  225.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  226.             }
  227.             return xmlhttp;
  228.         }
  229.  
  230.     </script>
  231. </body>
  232. </html>

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

服务端（ChatHandler.ashx）　

  1. <%@ WebHandler Language="C#" Class="ChatHandler" %>
  2.  
  3. using System;
  4. using System.Web;
  5. using System.Collections;
  6. using System.Collections.Generic;
  7. using System.Linq;
  8. using System.Web.Script.Serialization;
  9. using System.Threading;
  10. using System.Collections.Concurrent;
  11.  
  12. public class ChatHandler : IHttpHandler
  13. {
  14.  
  15.     private class Msg
  16.     {
  17.         public string name { get; set; }
  18.         public string sendtime { get; set; }
  19.         public string content { get; set; }
  20.         public string readednams { get; set; }
  21.         public int readedCount { get; set; }
  22.         public string type { get; set; }
  23.     }
  24.  
  25.     private static List<Msg> msgs = new List<Msg>();
  26.     private static ReaderWriterLockSlim rwLock = new ReaderWriterLockSlim();
  27.     private static object syncObject = new object(),syncObject1 = new object();
  28.     private static List<string> onLineNames = new List<string>();
  29.  
  30.     public void ProcessRequest(HttpContext context)
  31.     {
  32.         string chatName = context.Request.Form["name"];
  33.         string msg = context.Request.Form["msg"];
  34.         string actionName = context.Request.Form["action"];
  35.         JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
  36.  
  37.         object responseObject = null;
  38.  
  39.         switch (actionName)
  40.         {
  41.             case "receive":
  42.                 {
  43.                     responseObject = GetNewMessages(chatName);
  44.                     break;
  45.                 }
  46.             case "send":
  47.                 {
  48.                     responseObject = SendMessage(chatName, msg, "normal");
  49.                     break;
  50.                 }
  51.             case "on":
  52.             case "off":
  53.                 {
  54.                     responseObject = SetChatStatus(chatName, actionName);
  55.                     break;
  56.                 }
  57.             case "onlines":
  58.                 {
  59.                     responseObject = onLineNames;
  60.                     break;
  61.                 }
  62.         }
  63.  
  64.         context.Response.ContentType = "text/json";
  65.         context.Response.Write(jsSerializer.Serialize(responseObject));
  66.  
  67.     }
  68.  
  69.     private object SetChatStatus(string chatName, string status)
  70.     {
  71.         if (status == "on")
  72.         {
  73.             if (onLineNames.Exists(s => s == chatName))
  74.             {
  75.                 return new { success = false, info = "该聊天妮称已经存在，请更换一个名称吧！" };
  76.             }
  77.             lock (syncObject1)
  78.             {
  79.                 onLineNames.Add(chatName);
  80.             }
  81.             SendMessage(chatName, "大家好，我进入聊天室了！", status);
  82.             return new { success = true, info = string.Empty };
  83.         }
  84.         else
  85.         {
  86.             lock (syncObject1)
  87.             {
  88.                 onLineNames.Remove(chatName);
  89.             }
  90.             SendMessage(chatName, "再见，我离开聊天室了！", status);
  91.             return new { success = true, info = string.Empty };
  92.         }
  93.     }
  94.  
  95.     /// <summary>
  96.     /// 获取未读的新消息
  97.     /// </summary>
  98.     /// <param name="chatName"></param>
  99.     /// <returns></returns>
  100.     private object GetNewMessages(string chatName)
  101.     {
  102.         //第一种：循环处理
  103.         while (true)
  104.         {
  105.  
  106.             var newMsgs = msgs.Where(m => m.name != chatName && !(m.readednams ?? "").Contains(chatName)).OrderBy(m => m.sendtime).ToList();
  107.             if (newMsgs != null && newMsgs.Count() > 0)
  108.             {
  109.                 lock (syncObject)
  110.                 {
  111.                     newMsgs.ForEach((m) =>
  112.                     {
  113.                         m.readednams += chatName + ",";
  114.                         m.readedCount++;
  115.                     });
  116.                     int chatNameCount = onLineNames.Count();
  117.                     msgs.RemoveAll(m => m.readedCount >= chatNameCount);
  118.                 }
  119.  
  120.                 return new { success = true, msgs = newMsgs };
  121.             }
  122.  
  123.             Thread.Sleep(1000);
  124.         }
  125.  
  126.         //第二种方法，采用自旋锁
  127.         //List<Msg> newMsgs = null;
  128.         //SpinWait.SpinUntil(() =>
  129.         //{
  130.         //    newMsgs = msgs.Where(m => m.name != chatName && !(m.readednams ?? "").Contains(chatName)).OrderBy(m => m.sendtime).ToList();
  131.         //    return newMsgs.Count() > 0;
  132.         //}, -1);
  133.  
  134.         //rwLock.EnterWriteLock();
  135.         //newMsgs.ForEach(m =>
  136.         //{
  137.         //    m.readednams += chatName + ",";
  138.         //    m.readedCount++;
  139.         //});
  140.         //rwLock.ExitWriteLock();
  141.         //return new { success = true, msgs = newMsgs };
  142.     }
  143.  
  144.     /// <summary>
  145.     ///
  146.     /// </summary>
  147.     /// <param name="chatName"></param>
  148.     /// <param name="msg"></param>
  149.     /// <returns></returns>
  150.     private object SendMessage(string chatName, string msg, string type)
  151.     {
  152.         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 };
  153.         //rwLock.EnterWriteLock();
  154.         lock (syncObject)
  155.         {
  156.             msgs.Add(newMsg);
  157.         }
  158.         //rwLock.ExitWriteLock();
  159.         return new { success = true, msgs = new[] { newMsg } };
  160.     }
  161.  
  162.     public bool IsReusable
  163.     {
  164.         get
  165.         {
  166.             return false;
  167.         }
  168.     }
  169.  
  170. }

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

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

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

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

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

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

张三：

李四：

小美：

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

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

  1. 短连接、长连接、轮询、长轮询、WebSocket

    短连接 建立连接——数据传输——关闭连接...建立连接——数据传输——关闭连接 定义:短连接是指通讯双方有数据交互时,就建立一个连接,数据发送完成后,则断开此连接,即每次连接只完成一项业务的发送. 应 ...

  2. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  3. [UWP]分享一个基于HSV色轮的调色板应用

    1. 前言 上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store 2. 功能 ColorfulBox是Adobe 色 ...

  4. 基于mykernel完成时间片轮询多道进程的简单内核

    基于mykernel完成时间片轮询多道进程的简单内核 原创作品转载请注明出处+中科大孟宁老师的linux操作系统分析:https://github.com/mengning/linuxkernel/ ...

  5. 分享一个基于 ABP(.NET 5.0) + vue-element-admin 管理后台

    1.前言 分享一个基于ABP(.NET 5.0) + vue-element-admin项目.希望可以降低新手对于ABP框架的学习成本,感兴趣的同学可以下载项目启动运行一下.对于想选型采用ABP框架的 ...

  6. 黑科技！仅需 3 行代码，就能将 Gitter 集成到个人网站中，实现一个 IM 即时通讯聊天室功能？

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  7. 分享一个基于thrift的java-rpc框架

    简单介绍 这是一个简单小巧的Java RPC框架,适用于Java平台内.为系统之间的交互提供了.高性能.低延迟的方案.适合在集群数量偏少的情况下使用(50台以下集群环境).当然.它也可以在大型集群环境 ...

  8. 分享一个基于 netty 的 java 开源项目

    1.简介 中微子代理(neutrino-proxy)是一个基于 netty 的.开源的 java 内网穿透项目.遵循 MIT 许可,因此您可以对它进行复制.修改.传播并用于任何个人或商业行为. 2.项 ...

  9. 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)

    阅读目录 简介 系统特色 系统介绍 - 首页 系统介绍 - 列表页 系统介绍 - 明细页(表单) 系统介绍 - 菜单/按钮 系统介绍 - 权限中心 系统介绍 - 数据权限 系统介绍 - 字段权限 系统 ...

随机推荐

  1. MVC学习-http://www.w3school.com.cn/

    连接字符串: <add name="MovieDBContext" connectionString="Data Source=|DataDirectory|\Mo ...

  2. 使用Word2013发布博客

    步骤一.新建博客文章 打开Word软件,新建->博客文章(第一次在模板下面可能找不到,可以在搜索栏中搜索"博客",下次在首页就能直接找到). 步骤二.编辑博客文章 1.输入文 ...

  3. Python黑帽编程 4.0 网络互连层攻击概述

    Python黑帽编程 4.0 网络互连层攻击概述 是时候重新温习下下面这张图了. 图2 本章的内容核心包含上图中的网络层和传输层.TCP/IP是整个网络协议体系中的核心,因为从这里开始,数据传输从局域 ...

  4. [.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化

    [.net 面向对象程序设计进阶] (12) 序列化(Serialization)(四) 快速掌握JSON的序列化和反序列化 本节导读: 介绍JSON的结构,在JS中的使用.重点说明JSON如何在.N ...

  5. Android RatingBar 自定义样式

    Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...

  6. PHP扩展-扩展的生成和编译

    首先说明一下,PHP扩展有两种编译方式:方式一:在编译PHP时直接将扩展编译进去方式二:扩展被编译成.so文件,在php.ini里配置加载路径: 以下开始说明创建PHP扩展并编译的步骤:下载PHP源码 ...

  7. 数据结构与算法JavaScript (二) 队列

    队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出(First-In-First-Out,FIFO)的数据结构 队列在程序程序设计中用的非常的频繁,因为javascript ...

  8. Evaluate Math Expression

    Evaluate Math Expression eryar@163.com 摘要Abstract:本文简要介绍了数学表达式解析求值的几款开源软件,并结合程序代码说明了OpenCascade中表达式包 ...

  9. MVVM框架下 WPF隐藏DataGrid一列

    最近的一个项目,需要在部分用户登录的时候,隐藏DataGrid中的一列,但是常规的绑定不好使,在下面举个例子. XAML部分代码 <Window x:Class="DataGridCo ...

  10. 前端学PHP之错误处理

    × 目录 [1]错误报告 [2]错误级别 [3]错误处理[4]自定义错误[5]错误日志[6]异常处理[7]自定义异常 前面的话 错误处理对于程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取 ...