websocket

软件通信有七层结构，下三层偏向于数据通信，上三层更倾向于数据处理，中间的传输层则是连接下三层和上三层之间的桥梁，每一层都做不同的工作，上层协议依赖于下层协议，基于这个通信结构的概念，Socket并不是一个协议，是应用层与ICP/IP协议族通信的中间软件抽象层，它是一组接口，当两台主机通信时，让Socket去组织数据，以符合指定的协议。TCP连接则是更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。Websocket则是一个典型的应用层协议。

总的来说：Socket是传输控制层协议，Websocket是应用层协议。

WebSocket对象提供了用于创建和管理WebSocket连接，以及可以通过该连接发送和接手数据的API。

使用WebSocket()构造函数来构造一个WebSocket

构造函数

WebSocket(url[,protocals])  //返回一个WebSocket对象

常量

Constant	Value
WebSocket.CONNECTING	0
WebSocket.OPEN	1
WebSocket.CLOSING	2
WebSocket.CLOSED	3

属性

WebSocket.binaryType  //使用二进制的数据类型连接
WebSocekt.bufferedAmount //只读，未发送到服务器的字节数
WebSocket.extentions //只读，服务器选择的扩展
WebSocket.onclose //用于指定连接关闭后的回调函数
WebSocket.onerror //用于指定当从服务器接受到信息时的回调函数
WebSocket.onmessage //用于指定当从服务器接受到信息时的回调函数
WebSocket.onopen //用于指定连接成功后的回调函数
WebSocket.protocal //只读，服务器选择的下属协议
WebSocket.readyState //只读，当前的链接状态
WebSocket.url   //只读，WebSocket的绝对路径

方法

WebSocket.close([code[, reason]])  //关闭当前链接
WebSocket.send(data) //对要传输的数据进行排队

事件

使用addEventListener()或将一个事件监听器赋值给本接口的oneventname属性，来监听下面的事件。

close  //当一个WebSocket连接被关闭时触发，也可以通过onclose属性来设置
error  //当一个WebSocket连接因错误而关闭时触发，例如无法发送数据时，也可以通过onclose属性来设置
message //当通过WebSocket收到数据时触发，也可以通过onmessage属性来设置
open  //当一个WebSocket连接成功时触发，也可以通过onopen属性来设置

// create WebSocket connection
const socket = new WebSocket('ws://localhost:8080');//Connection opened
socket.addEventListener('open', function(event){socket.send("Hello Server");
});//Listen for messages
socket.addEventListener('message', function(event){console.log('Message from server', event.data);
})

---

WebSocket客户端应用程序使用WebSocket API通过WebSocket协议与WebSocket服务器通信

创建WebSocket对象

为了使用WebSocket协议通信，你需要创建一个WebSocket对象，这将会自动地尝试建立与服务器的连接

WebSocket构造函数接受一个必要参数和一个可选参数

WebSocket WebSocket(in DOMString url,in optional DOMString protocols;
);

url

要连接的URL, 这应当是WebSocket服务器会相应的URL

protocols:可选

一个协议字符串或一个协议字符串数组。这些字符串用来指定子协议，这样一个服务器就可以实现多个WebSocket子协议，这样一个服务器就可以实现多个WebSocket子协议(比如你可能希望一个服务器可以根据指定的protocol来应对不同的互动情况)。 如果不指定协议字符串则认为是空字符串。

构造函数可能抛出以下的异常：

SECURITY_ERR

尝试连接的端口被阻塞。

连接错误

如果尝试连接过程中发生错误，那么首先一个名为“error"的事件会被发送给WebSocket对象，然后调用气onerror handler 然后CloseEvent被发送给WebSocket(然后调用其onclose handler) 以说明连接关闭的原因

示例

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");

返回后， exampleSocket.readyState参数为CONNECTING. 一旦连接可以传送数据，readyState就会变为OPEN.

如果想要建立一个支持协议选择的连接，可以指定协议的列表

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne","protocolTwo"]);

一旦连接建立了，也就是说readyState是OPEN, exampleSocket.protocol就会告诉你服务器选择了哪个协议

上面的例子中ws替代了http,同样地，wss也会替代https，建立WebSocket连接有赖于HTTP Upgrade mechanism 所以当我们使用ws://www.example.com或者wss://www.example.com来访问HTTP服务器的时候协议会隐式地升级。

向服务器发送数据

一旦你的连接打开完成，就可以向服务器发送数据了，对每一个要发送的消息使用WebSocket对象的send()方法

exampleSocket.send("one message was sent to you!")

因为连接的建立是异步的，而且容易失败，所以不能保证刚创建的WebSocket对象使用send()方法会成功。我们至少可以确定企图在链接建立起来之后立马发送数据，可以通过注册onopen事件处理器解决

exampleSocket.onopen = function (event) {exampleSocket.send("one message was sent to you!")
}

使用Json发送对象

可以使用Json来向服务器发送复杂一些的数据。例如一个聊天程序与服务器交互的协议可以通过封装在JSON里面的数据来实现：

// 服务器向所有用户发送文本
function sendText() {//构造一个msg对象，包含了服务器处理所需的数据var msg = {type: "message",text:document.getElementById("text").value,id: clientID,date: Date.now()};// 把msg对象作为JSON格式字符串发送exampleSocket.send(Json.stringfy(msg));// 清空文本输入元素，为接收下一条消息做好准备document.getElementById("text").value="";
}

接收服务器发送的消息

WebSocket是一个基于事件的API，收到消息的时候，一个"message"消息会被发送到onmessage函数，为了开始监听传入的数据，可以进行如下操作：

exampleSocket.onmessage = fucntion (event) {console.log(event.data);
}

接受与解析JSON对象

考虑在Using JSON to transmit objects中提到的聊天应用客户端，客户端会收到各种类型的数据包，比如：

• 登录握手
• 消息文本
• 用户列表更新

解析这些收到的消息的代码可能是这样的：

exampleSocket.onmessage  = function(event) {var f = document.getElementById("chatbox").contentDocument;var text = "",var msg = JSON.parse(event.data);var time = new Date(msg.date);var timestr = time.toLocaleTimeString();switch(msg.type) {case "id":clientID = msg.id;setUsername();break;case "username":text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";break;case "message":text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";break;case "rejectusername":text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"break;case "userlist":var ul = "";for(i=0, i< msg.users.length; i++) {ul += msg.users[i] + "<br>";}document.getElementById("userlistbox").innerHTML = ul;break;}if (text.length){f.write(text);document.getElementById("chatbox").contentWindow.scrollByPages(1);}
}

关闭连接

exampleSocket.close();

https://github.com/mdn/samples-server/tree/master/s/websocket-chat

http://www.websocket-test.com/

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

客户端写在js里面，进行一个监听

https://github.com/chyingp/blog/tree/master/demo/2017.05.22-web-socket/ws

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

客户端写在js里面，进行一个监听

https://github.com/chyingp/blog/tree/master/demo/2017.05.22-web-socket/ws

🖤