C#制造簡略的多人在線即時交換聊天室。本站提示廣大學習愛好者:(C#制造簡略的多人在線即時交換聊天室)文章只能為提供參考,不一定能成為您想要的結果。以下是C#制造簡略的多人在線即時交換聊天室正文
完成網頁版的在線聊天室的辦法有許多,在沒有離開HTML5之前,罕見的有:准時輪詢、長銜接+長輪詢、基於第三方插件(如FLASH的Socket),而假如是HTML5,則比擬簡略,可以直接應用WebSocket,固然HTML5今朝在PC端並沒有被一切閱讀器支撐,所以我的這個聊天室還是基於長銜接+長輪詢+原生的JS及AJAX完成的多人在線即時交換聊天室,這個聊天室實際上是我上周周末完成的,功效簡略,能夠有些缺乏,但可以知足在線即時聊天需求,分享也是給年夜家供給一個思緒,年夜家可以基於此來完成更好的在線即時聊天對象。
聊天室功效簡介:
1。支撐多人進入統一個聊天室聊天;
2。進入即離線均會主動生成告訴信息顯示在聊天室中,如許聊天的人們就曉得誰出去了誰分開了;
3。及時顯示在耳目員表列;
4。無需數據庫支撐,全體存在內存中,固然有前提的可以采取散布式緩存或加一個數據庫來存,這裡演示就是用內存來存了。
上面就開端分享我的代碼,因為采取原生的JS及AJAX,所以簡略易懂,代碼分離WEB前端及辦事端(有點空話了)
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 /> <col /> </colgroup> <tr > <td> 迎接進入夢在旅途的網頁即時在線年夜眾聊天室 - www.zuowenjun.cn: </td> <td> 以後在耳目員 </td> </tr> <tr id="midtr"> <td> <div id="chatmsgbox"> </div> </td> <td> <div id="chatonlinebox"> <ul id="chatnames"></ul> </div> </td> </tr> <tr > <td colspan="2"> <label for="name">聊天妮稱:</label> <input type="text" id="name" /> <input type="button" id="btnsavename" value="確認進入" /> <label for="msg">輸出內容:</label> <input type="text" id="msg" /> <input type="button" id="btnSend" value="發送新聞" disabled="disabled" /> </td> </tr> </table> <script type="text/javascript"> var chatName = null; var oChatmsgbox, oMsg, oChatnames; var ajaxforSend, ajaxforRecv; //頁面加載初始化 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(); } //分開時提示 window.onbeforeunload = function () { event.returnValue = "您肯定要加入聊天室嗎?"; } //封閉時離線 window.onunload = function () { setChatStatus(chatName, "off"); } //設置聊天狀況:在線 OR 離線 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(); }); } //加載在耳目員稱號列表 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); }); } //發送新聞 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("發送勝利!"); } }); } //顯示新聞 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 + " 說:<br/>" + msg.content + "</p></div>"; if (msg.type == "on" || msg.type == "off") { loadonline = true; } } if (loadonline) { loadOnlineChatNames(); } } //挪用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對象(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>
代碼很簡略,並都有正文,在此就不作解釋了,假如有疑問迎接鄙人方評論。
辦事端(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 = "該聊天妮稱曾經存在,請改換一個稱號吧!" }; } 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。狀況切換:上線則參加到在耳目員聚集中,並生成一條上線新聞放入到聊天新聞聚集中,離線則從在耳目員聚集中移除該人員信息,並生成一條離線新聞放入聊天新聞聚集中;
留意事項,因為采取了全局靜態聚集,所以線程同步比擬主要。
終究的完成後果展現以下:
張三:
李四:
小美:
假如認為不錯的話,給個推舉吧,你的支撐是推進我赓續進步的動力及寫作的源泉,我一向保持:常識在於分享,分享的同時本身也在生長,願望與年夜家配合生長,感謝!