websoket-Toy模板网

这篇具有很好参考价值的文章主要介绍了websoket。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

它与 http 协议一样，也是一种通讯协议

http 协议：

作用：规范浏览器与服务器交互的一种标准。
特点：
- 每次浏览器与服务器之间进行交互都需要重复开启和断开连接
- 请求只能由浏览器主动发送，服务器被动响应

而 websoket 跟它其实是一样的，websoket 就是http协议的其中一部分，正常的请求状态码是200，websoket的状态码是101

websoket 原理：

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

特点：

较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。

更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。

保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。

可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。

更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

示例


			webSocke() {
				let that = this
							//发起连接
					let ws = new WebSocket("ws地址")
							//连接成功 
					ws.onopen = function(e) {
						console.log("链接成功", e)
						// 0: 请求未初始化
						// 1: 服务器连接已建立
						// 2: 请求已接收 接收到了响应头
						// 3: 请求处理中 正在下载响应体
						// 4: 请求已完成，且响应已就绪
						if(ws.readyState==1){
							ws.send(JSON.stringify("你好"))
						}
					};
					//接受错误
					ws.onerror = function() {
						console.log("链接失败")
					}
					// 接受和发送消息 的时候触发
					ws.onmessage = function(msg) {
						console.log("111111111111111111111")
							console.log(msg.data)
					}
			},
			// websend(){
			// 	let ws = new WebSocket("wss://shop.oxibar.cn/msg")

			// },

这是我自己写的实例，当然，这些东西在网上一挖一麻袋多嘞很

不中的话没我跟你们看看官方咋写的？废话不说啦，上代码

//WebSocket 发送和接收消息，通常在服务器发送一些数据时发生Message事件。服务器发送到客户端的消息可以包括纯文本消息，二进制数据或图像。无论何时发送数据，都会触发onmessage函数。
//此事件充当客户端对服务器的耳朵。每当服务器发送数据时，都会触发onmessage事件。
//以下代码段描述了接收服务器端发送过来的message消息。


connection.onmessage = function(e){
   var server_message = e.data;
   console.log(server_message);
}

// 创建WebSocket连接.
const socket = new WebSocket('ws://localhost:8080');
 
// 连接成功触发
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});
 
// 监听消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
等等......