本文完全原创,有问题请多多指教 。
最近一个项目需要做一个客户端运行与浏览器上面的即时通讯程序,原本我写的服务器端程序已经实现了,无奈通信层是在TCP套接字层上,单纯通过浏览器虽然可以实现,但是需要依赖于浏览器插件,而老师的要求是跨平台,并且浏览器插件的方式技术欠缺,所以决定重写浏览器端程序,使用javascript直接支持的通信协议。
传统的B/S架构即时通讯方式通常是使用ajax技术,在浏览器端通过轮询的方式定时的给web服务器发送request请求讯息。这样的通信方式的一个明显的缺点是ajax请求每次必须带有一个HTTP请求的头,有时候一个消息头甚至比有效的消息还长,并且HTTP请求是短连接,频繁的创建撤销套接字对客户端、服务器端来说都是沉重的负担。同时通信的实时性与请求频率成正比,代价极为高昂,于是放弃了这种方式。
最后通过仔细上网查找资料,发现了最新的HTML5技术的websocket协议能够满足项目的需求。什么是websocket?websocket是基于TCP/IP上面实现的一个类似于HTTP的协议,区别是websocket是长连接,并且通信是双向的,服务器可以向浏览器推送信息!
一个简单的浏览器端websocket js代码是这样的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var wsServer = 'ws://localhost:8000';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
//alert("lian jie cheng gong");
function onOpen(evt) {
alert("Connected to WebSocket server.");
websocket.send("hello");
}
function onClose(evt) {
alert("Disconnected");
}
function onMessage(evt) {
alert('Retrieved data from server: ' + evt.data);
}
function onError(evt) {
alert('Error occured: ' + evt.data);
}
function Button1_onclick() {
var buffer = "Hello";
//for (i = 0; i < 9; i++) buffer += buffer;
websocket.send(buffer); //document.getElementById("Text1").innerHTML
}
</script>
</head>
<body>
<p>
<textarea id="TextArea1" cols="20" name="S1" rows="2"></textarea></p>
<p>
<input id="Text1" type="text" /></p>
<p>
<input id="Button1" type="button" value="button" οnclick="return Button1_onclick()" /></p>