websocket---前端的实现(一)

1.使用websocket可以方便的实现服务器端主动的向客户端推送消息，而不用在使用轮询和定时器的方式获取数据

2.websocket协议特点：

1）建立在TCP协议之上

2）与HTTP协议有着很好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器

3）数据格式比较轻量，性能开销小，通信高效

4）可以发送文本，也可以发送二进制数据

5）没有同源限制，客户端可以与任意服务器通信

6）协议标识是ws（如果加密，则为wss），服务器网址是URL

一）h5原生的websocket的api

1.创建websocket的对象

	var websocket  = new WebSocket("ws://localhost:8080/websocket");

2.websocket实例的readyState属性

websocket.readyState有四种结果代表当前websocket的状态

a.  CONNECTING: 值为0，表示正在连接

b. OPEN:值为1，表示连接成功，可以通信

c.CLOSING:值为2，表示连接正在关闭

d.CLOSED:值为3，表示连接已经关闭，或者打开连接失败

3.websocket实例的onopen属性

websocket.onopen，用于指定连接成功之后的回调函数

	websocket.onopen = function () {
        	console.log(websocket.readyState)
	}

连接成功之后如果有多个回调函数的话，可以使用websocket的函数websocket.addEventListener();

websocket.addEventListener('open',function(event){

websocket.send(''hello websocket");

})

4.websocket实例的onclose属性

websocket.onclose，用于指定连接关闭后的回调函数

	websocket.onclose = function () {
    		console.log("websocket连接关闭")
	}

连接关闭之后多个回调函数的话，可以使用websocket的行数websocket.addEventListener();

websocket.addEventListener('close',function(event){

var code = event.code;

var reason = event.reason;

var wasClean = event.wasClean;

})

5.webSocket实例的onmessage属性

webSocket.onmessage 用于指定收到服务器数据后的回调函数，同样可以使用websocket.addEventListener('message',function(event){})接受消息

	websocket.onmessage = function (event) {
    		console.log(event.data);
	}

收到的消息可能是文本格式，也可能是二进制数据（blob对象或者Arraybuffer）

websocket.onmessage(function(event){

if(typeof event.data == string){

console.log('get data is string');

}

if(event.data interfaceof ArrayBuffer){

console.log('get data is ArrayBuffer');

}

})

可以使用websocke.binaryType指定收到的消息的格式   binaryType = 'blob';

6.websocket实例的send()方法向服务器端发送消息，可以是文本格式，可以是blob对象或者ArrayBuffer

	websocket.send(document.getElementById('text').value);

7.websocket实例的bufferedAmount属性，表示还有多少二进制字节没有发送出去，可以判断发送是否结束

	websocket.send(document.getElementById('text').value);
	if(websocket.bufferedAmount == 0){
		console.log('发送结束');
	}else{
		console.log('发送正在进行');
	}

8.websocket实例的onerror属性，用于指定websocket连接发生错误时候的回调函数

二)sockJS.js模拟的websocket

sockJS模拟的websocket与h5的websocket的api相仿，特别注意sockJS连接的协议是http而非ws

 var sock = new SockJS("http://localhost:8080/hello");
  sock.onopen = function() {
  console.log("连接成功");
      };
      sock.onmessage = function(event) {
    console.log("接收的数据"+event.data)
      };
      sock.onclose = function() {
    console.log("websocket连接关闭")
      }
      //向服务器发送消息
      websocket.send(document.getElementById('text').value);
//关闭连接
websocket.close();