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。狀況切換:上線則參加到在耳目員聚集中,並生成一條上線新聞放入到聊天新聞聚集中,離線則從在耳目員聚集中移除該人員信息,並生成一條離線新聞放入聊天新聞聚集中;
留意事項,因為采取了全局靜態聚集,所以線程同步比擬主要。
終究的完成後果展現以下:
張三:

李四:

小美:

假如認為不錯的話,給個推舉吧,你的支撐是推進我赓續進步的動力及寫作的源泉,我一向保持:常識在於分享,分享的同時本身也在生長,願望與年夜家配合生長,感謝!