之前在个人网站上预留了一个网页聊天室的功能,在这次寒假抽出了时间来完成。快速访问
简要记录一下网页聊天室的设计过程。
AJAX轮询
在设计之前一直纠结该使用何种方式来实现网页聊天室这个模块,最基本的想法是使用ajax来实现轮询,从而达到消息推送的目的,目前的很多网站也是通过这样的手段来实现推送技术。轮询是在特定的时间间隔(如每一秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这样传统的模式需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
WebSocket
HTML5定义的WebSocket协议,能够更好地节省服务器资源和带宽,并且能够更实时地进行通讯。
WebSocket是为了解决实时传送消息的问题,当然也可以传送数据,但是不保证传送的效率和质量,而WebRTC可用于可靠地传输音视频数据、文件等。并且可以建立P2P连接,不需要服务进行转发数据。虚拟电话、在线面试等现在很多都采用WebRTC来实现。
WebSocket并不是我们寻常意义上的基于TCP或者UDP协议的套接字,而是一个基于TCP的应用层协议,和HTTP协议工作在计算机网络的同一层;WebSocket其实就是,在TCP的基础上增加了一个协议,这个协议和TCP协议很想,也需要握手,挥手,发送大数据也要分包,也是按照位进行标识,但它并不是套接字,不是socket,socket工作在传输层,它工作在应用层。
浏览器通过JavaScript想服务器发出建立WebSocket连接的请求,连接建立后,客户端和服务器端就可以通过TCP连接直接交换数据。当获取到Web Socket连接后,可以通过send()方法来向服务器发送数据,并通过onmessage时间来接受服务器返回的数据。
JS代码如下:
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://www.xpllyn.com:3333");
socket.onope