只用js 實現的簡約聊天框

之前看到別人的網頁打開后都有個聊天框，可以與同時在網上的網友聊點簡單話題，於是便找了個最簡單的方法

使用js，客戶端 打開頁面，不斷的給服務器發送請求來得到 新的消息

 

用JavaScript實現的輪詢的優點和缺點：

　　1. 優點：很容易實現，不需要任何服務器端的特定功能，且在所有的瀏覽器上都能工作。

　　2. 缺點：這種方法很少被用到，因為它是完全不具伸縮性的。試想一下，在100個客戶端每個都發出2秒鍾的輪詢請求的情況下，所損失的帶寬和資源數量，在這種情況下30%的請求沒有返回數據。

 

代碼實現：頁面使用了 Uediter 編輯器，后台存儲最新消息，獲取最新消息

rootroom.js

var login = true;
//發送請求函數
function sendRequest()
{
	if (ueditor.hasContents()) {
		ueditor.sync();
		$("#chatMsg").val(ueditor.getContent());
	}
	//input是個全局變量，就是用戶輸入聊天信息的單行文本框
	var chatMsg = $("#chatMsg").val();
	var datas="chatMsg=" + chatMsg;
	$.ajax({
		type: "post",
		url: "/chat",
		data: datas,
		datatype: "text",
		success:function(data){
			if(data=="nologin")
			{
				login=false;
				alert("您還沒有登錄，請先登錄");
				window.location.href="/index.jsp";
			}
			else
			{
				login=true;
				//使用chatArea多行文本域顯示服務器響應的文本
				$("#chatArea").html(data);
			}
			//清空輸入框的內容
			$("#chatMsg").val("");
			ueditor.setContent("");
		}
	});
}
function sendEmptyRequest()
{
	var datas="";
	$.ajax({
		type: "post",
		url: "/chat",
		data: datas,
		datatype: "text",
		success:function(data){
			
			if(data=="nologin")
			{
				login=false;
				alert("您還沒有登錄，請先登錄");
				window.location.href="/index.jsp";
			}
			else
			{
				login=true;
				//使用chatArea多行文本域顯示服務器響應的文本
				$("#chatArea").html(data);
			}
		}
			
	});

	//指定0.8s之后再次發送請求
	if(login==true)
	{
		setTimeout("sendEmptyRequest()" , 800);
	}
}

function enterHandler(event)
{
	//獲取用戶單擊鍵盤的“鍵值”
	var keyCode = event.keyCode ? event.keyCode 
		: event.which ? event.which : event.charCode;
	//如果是回車鍵
	if (keyCode == 13)
	{
		sendRequest();
	}
}