快捷導(dǎo)航

C#制作簡(jiǎn)單的多人在線(xiàn)即時(shí)交流聊天室

更新時(shí)間：2015年11月22日 16:12:20 投稿：hebedich

這篇文章主要介紹了C#制作簡(jiǎn)單的多人在線(xiàn)即時(shí)交流聊天室的相關(guān)資料,需要的朋友可以參考下

實(shí)現(xiàn)網(wǎng)頁(yè)版的在線(xiàn)聊天室的方法有很多，在沒(méi)有來(lái)到HTML5之前，常見(jiàn)的有：定時(shí)輪詢(xún)、長(zhǎng)連接+長(zhǎng)輪詢(xún)、基于第三方插件（如FLASH的Socket），而如果是HTML5，則比較簡(jiǎn)單，可以直接使用WebSocket，當(dāng)然HTML5目前在PC端并沒(méi)有被所有瀏覽器支持，所以我的這個(gè)聊天室仍是基于長(zhǎng)連接+長(zhǎng)輪詢(xún)+原生的JS及AJAX實(shí)現(xiàn)的多人在線(xiàn)即時(shí)交流聊天室，這個(gè)聊天室其實(shí)是我上周周末完成的，功能簡(jiǎn)單，可能有些不足，但可以滿(mǎn)足在線(xiàn)即時(shí)聊天需求，分享也是給大家提供一個(gè)思路，大家可以基于此來(lái)實(shí)現(xiàn)更好的在線(xiàn)即時(shí)聊天工具。

聊天室功能簡(jiǎn)介：

1。支持多人進(jìn)入同一個(gè)聊天室聊天；

2。進(jìn)入即離線(xiàn)均會(huì)自動(dòng)生成通知信息顯示在聊天室中，這樣聊天的人們就知道誰(shuí)進(jìn)來(lái)了誰(shuí)離開(kāi)了；

3。實(shí)時(shí)顯示在線(xiàn)人員表列；

4。無(wú)需數(shù)據(jù)庫(kù)支持，全部存在內(nèi)存中，當(dāng)然有條件的可以采用分布式緩存或加一個(gè)數(shù)據(jù)庫(kù)來(lái)存，這里演示就是用內(nèi)存來(lái)存了。

下面就開(kāi)始分享我的代碼，由于采用原生的JS及AJAX，所以簡(jiǎn)單易懂，代碼分別WEB前端及服務(wù)端（有點(diǎn)廢話(huà)了）

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      background-color: #f8f7f7;
      font-family: arial,sans-serif;
    }
 
    #layouttable {
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
      border:2px solid green;
      border-collapse:collapse;
      min-width:800px;
    }
 
      #layouttable td {
        border: 1px solid green;
      }
 
    .h100p {
      height:100%;
    }
 
    .midtr{height:auto;}
      .midtr tr td {
        height: 100%;
      }
 
    #chatmsgbox, #chatonlinebox {
      background-color:white;
      overflow-x: hidden;
      overflow-y: auto;
      overflow-wrap: break-word;
      height: 100%;
    }
 
    #chatonlinebox {
      background-color:#f5d0a8;
    }
 
    .rc, .sd {
      overflow:hidden;
    }
 
     .rc p {
      float: left;
      color: green;
    }
      .sd p {
        float: right;
        color: orange;
      }
  </style>
 
</head>
<body>
  <table id="layouttable">
    <colgroup>
      <col style="width:auto" />
      <col style="width: 200px;" />
    </colgroup>
    <tr style="height:30px; background-color:lightblue;color:yellow;">
      <td>
        歡迎進(jìn)入夢(mèng)在旅途的網(wǎng)頁(yè)即時(shí)在線(xiàn)大眾聊天室 - www.zuowenjun.cn：
      </td>
      <td>
        當(dāng)前在線(xiàn)人員
      </td>
    </tr>
    <tr style="height:auto;" id="midtr">
      <td>
        <div id="chatmsgbox">
        </div>
      </td>
      <td>
        <div id="chatonlinebox">
          <ul id="chatnames"></ul>
        </div>
      </td>
    </tr>
    <tr style="height:50px;">
      <td colspan="2">
        <label for="name">聊天妮稱(chēng)：</label>
        <input type="text" id="name" style="width:80px;" />
        <input type="button" id="btnsavename" value="確認(rèn)進(jìn)入" />
        <label for="msg">輸入內(nèi)容：</label>
        <input type="text" id="msg" style="width:400px;" />
        <input type="button" id="btnSend" value="發(fā)送消息" disabled="disabled" />
      </td>
    </tr>
  </table>
  <script type="text/javascript">
    var chatName = null;
    var oChatmsgbox, oMsg, oChatnames;
    var ajaxforSend, ajaxforRecv;
 
    //頁(yè)面加載初始化
    window.onload = function () {
      document.getElementById("btnsavename").onclick = function () {
        this.disabled = true;
        var oName = document.getElementById("name");
        oName.readOnly = true;
        document.getElementById("btnSend").disabled = false;
        //receiveMsg();
        setChatStatus(oName.value,"on");
      }
 
      document.getElementById("btnSend").onclick = function () {
        sendMsg(oMsg.value);
      };
 
      //init
      oChatmsgbox = document.getElementById("chatmsgbox");
      oMsg = document.getElementById("msg");
      oChatnames = document.getElementById("chatnames");
      ajaxforSend = getAjaxObject();
      ajaxforRecv = getAjaxObject();
    }
 
    //離開(kāi)時(shí)提醒
    window.onbeforeunload = function () {
      event.returnValue = "您確定要退出聊天室嗎？";
    }
 
    //關(guān)閉時(shí)離線(xiàn)
    window.onunload = function () {
      setChatStatus(chatName, "off");
    }
 
    //設(shè)置聊天狀態(tài)：在線(xiàn) OR 離線(xiàn)
    function setChatStatus(name, status) {
      callAjax(getAjaxObject(), "action=" + status + "&name=" + name, function (rs) {
        if (!rs.success) {
          alert(rs.info);
          return;
        }
        if (status == "on") {
          chatName = document.getElementById("name").value;
          setTimeout("receiveMsg()",500);
        }
        loadOnlineChatNames();
      });
    }
 
    //加載在線(xiàn)人員名稱(chēng)列表
    function loadOnlineChatNames(){
      callAjax(getAjaxObject(), "action=onlines", function (rs) {
        var lis = "";
        for(var i=0;i<rs.length;i++)
        {
          lis += "<li>"+ rs[i] +"</li>";
        }
        oChatnames.innerHTML = lis;
      });
    }
 
    //接收消息列表
    function receiveMsg() {
      callAjax(ajaxforRecv, "action=receive&name=" + chatName, function (rs) {
        if (rs.success) {
          showChatMsgs(rs.msgs, "rc");
        }
        setTimeout("receiveMsg()", 500);
      });
    }
    //發(fā)送消息
    function sendMsg(msg) {
      callAjax(ajaxforSend, "action=send&name=" + chatName + "&msg=" + escape(msg), function (rs) {
        if (rs.success) {
          showChatMsgs(rs.msgs, "sd");
          oMsg.value = null;
          //alert("發(fā)送成功！");
        }
      });
    }
 
    //顯示消息
    function showChatMsgs(msgs, cssClass) {
      var loadonline = false;
      for (var i = 0; i < msgs.length; i++) {
        var msg = msgs[i];
        oChatmsgbox.innerHTML += "<div class='" + cssClass + "'><p>[" + msg.name + "] - " + msg.sendtime + " 說(shuō):<br/>" + msg.content + "</p></div>";
        if (msg.type == "on" || msg.type == "off")
        {
          loadonline = true;
        }
      }
      if (loadonline)
      {
        loadOnlineChatNames();
      }
    }
 
    //調(diào)用AJAX
    function callAjax(ajax, param, callback) {
 
      ajax.open("post", "ChatHandler.ashx", true);
      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
          var json = eval("(" + ajax.responseText + ")");
          callback(json);
        }
      };
      ajax.send(param);
    }
 
    //獲取AJAX對(duì)象（XMLHttpRequest）
    function getAjaxObject() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      }
      else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlhttp;
    }
 
  </script>
</body>
</html>

代碼很簡(jiǎn)單，并都有注釋?zhuān)诖司筒蛔髡f(shuō)明了，如果有疑問(wèn)歡迎在下方評(píng)論。

服務(wù)端（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<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 = "該聊天妮稱(chēng)已經(jīng)存在，請(qǐng)更換一個(gè)名稱(chēng)吧！" };
      }
      lock (syncObject1)
      {
        onLineNames.Add(chatName);
      }
      SendMessage(chatName, "大家好，我進(jìn)入聊天室了！", status);
      return new { success = true, info = string.Empty };
    }
    else
    {
      lock (syncObject1)
      {
        onLineNames.Remove(chatName);
      }
      SendMessage(chatName, "再見(jiàn)，我離開(kāi)聊天室了！", status);
      return new { success = true, info = string.Empty };
    }
  }
 
  /// <summary>
  /// 獲取未讀的新消息
  /// </summary>
  /// <param name="chatName"></param>
  /// <returns></returns>
  private object GetNewMessages(string chatName)
  {
    //第一種：循環(huán)處理
    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;
    }
  }
 
}

代碼也相對(duì)簡(jiǎn)單，實(shí)現(xiàn)原理主要是：

1。聊天消息：循環(huán)獲取未讀的消息，在取出讀的消息同時(shí)，將其標(biāo)識(shí)為已讀，全部已讀的消息則刪除；--我這里采用了兩種方法，第二種方法被注釋掉了，大家可以取消注釋試試，也是不錯(cuò)的，比第一種更直觀(guān)，建議使用；

2。發(fā)送消息：實(shí)例化一個(gè)消息實(shí)例并加入到聊天消息集合中；

3。狀態(tài)切換：上線(xiàn)則加入到在線(xiàn)人員集合中，并生成一條上線(xiàn)消息放入到聊天消息集合中，離線(xiàn)則從在線(xiàn)人員集合中移除該人員信息，并生成一條離線(xiàn)消息放入聊天消息集合中；

注意事項(xiàng)，由于采用了全局靜態(tài)集合，所以線(xiàn)程同步比較重要。

最終的實(shí)現(xiàn)效果展示如下：

張三：