Web Socket

webSocket介绍

1. WebSocket 是一种网络通信协议.
2. websocket 是HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议
3. HTTP 协议是一种无状态, 无连接, 单向的应用层协议, 它采用了请求\响应模型. 通信请求只能有客户端发起, 服务端对请求做出应答处理.
4. 弊端: HTTP协议无法实现服务器主动向客户端发起消息. 过渡频繁的异步ajax请求实现轮询, 效率低,浪费资源.

webSocket协议

本协议有两部分: 握手和数据传输
握手是基于http协议的

webSocket对象

实现WebSocket的Web浏览器将通过WebSocket 对象公开所有必需的客户端功能(主要指支持Html5的浏览器).
以下API用于创建WebSocket对象:

var ws = new webSocket(url);
// 参数url格式说明: ws://ip地址:端口号/资源名称

webSocket 事件

• open websocket对象.onopen 连接建立时触发
• message websocket对象.onmessage 客户端接收服务端数据时触发
• error websocket对象.onerror 通信发生错误时触发
• close websocket对象.onclose 连接关闭时触发

// 创建webSocket对象
var ws = new WebSocket("ws://localhost/chat");

// 给ws绑定事件
ws.onopen = function(){
//  在建立连接后需要做什么事
// 显示在线信息
$("#userName").html("用户:"+userName + "<span	style="float:right;color:green">在线</span>");
}

ws.onmessage = function(evt){
	// 获取服务器推送过来的消息
	var dataStr = evt.data;
	var res = JSON.parse(dataStr);
	// 判断是否是系统消息
	if(res.isSystem){
		// 系统消息
	}else{
		//	不是系统消息
	}
}

ws.onclose = function(){
// 显示离线信息
$("#userName").html("用户:"+userName + "<span	style="float:right;color:red">离线</span>");
}

// 发送数据给服务端
$('click').click(function(){
	ws.send(JSON.stringfy(json))
});