webSocket介绍
- WebSocket 是一种网络通信协议.
- websocket 是HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议
- HTTP 协议是一种无状态, 无连接, 单向的应用层协议, 它采用了请求\响应模型. 通信请求只能有客户端发起, 服务端对请求做出应答处理.
- 弊端: 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))
});