js中的WebSocket

一、WebSocket定义：

        html5提供的单个TCP连接上进行全双工通信的协议。WebSocket允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

二、WebSocket特点：

1. 在实现数据推送时，多数都是ajax轮询（在特定的时间间隔，由浏览器主动发起请求，会占用很多带宽和服务器资源）。而WebSocket建立TCP连接后，服务器可以主动给客户端传递数据，能够更好的节省服务器资源和带宽，实现更实时的数据通讯。
2. 因为WebSockets只能通过连接发送纯文本数据和二进制数据，所以对于复杂的数据结构，在通过连接发送之前，必须进行JSON.stringify()序列化。
3. 协议标识符是ws（加密则为wss），服务器网址就是 URL。如“ws://localhost:8080"。

三、WebSocket用法：

        WebSocket的所有操作都是采用事件的方式触发的，这样不会阻塞UI，使得UI有更快的响应时间和更好的用户体验。

        浏览器通过Javascript向服务器发出建立WebSocket连接的请求，连接建立后，客户端和服务器就可以通过TCP连接直接交换数据。当获取WebSocket连接后，可以通过send()方法向服务器发送数据，可以通过onmessage事件接收服务器返回的数据。

实例	var ws = new WebSocket(path [,protocols]); path：要连接的 URL，这应该是 WebSocket 服务器将响应的 URL。 protocols(可选)：一个协议字符串或者一个包含协议字符串的数组。
属性	ws.readyState ws.bufferedAmount ...
方法	ws.send() ws.close()
事件	ws.onopen ws.onmessage ws.close ws.onerror

//创建一个webSocket实例，执行后，客户端就会与服务端连接
var ws = new WebSocket("ws://localhost:8080"); 

//当WebSocket创建成功时，触发onopen事件
ws.onopen = function(){
    console.log("open");
    // 复杂的数据结构，在通过连接发送之前，必须进行序列化。 
    const json = JSON.stringify({
		type: 'keepalive',
		id: ''
	});
　  ws.send(json); //将消息发送到服务端
}

//当客户端收到服务端发来的消息时，触发onmessage事件
ws.onmessage = function(e){
    //e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
    const _data = JSON.parse(e.data); 
　　console.log(e.data,_data);
}

//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
ws.onclose = function(e){
　　console.log("close");
}

//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){
　　console.log(error);
}

四、Http与WebSocket的区别：

http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。

五、WebSocket和Socket的区别：

Socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而WebSocket则不同，它是一个完整的应用层协议，包含一套标准的API。

六、利用socket.io实现简易聊天室思路

参考博文：socket基础知识及js中的Web Sockets_狂野的河的博客-CSDN博客

1. 客户端通过发送io.connect(url)连接请求与服务器端进行连接（若不适用socket.io库，使用new WebSocket(url)可以发送连接请求）;
2. 服务器端通过监听‘connection’事件处理连接请求io.on(‘connection’,function(socket){//发送open事件}）；
3. 客户端通过监听open事件确认是否与服务器端进行连接；
4. 客户端通过send方法向服务器端发送信息；
5. 服务器端通过监听message方法监听send的发送信息，并处理发送信息（将信息广播给其他聊天室成员和自己）；
6. 服务器端通过监听disconnect方法判断客户端请求是否断开；