WebScoket协议的理解与使用
2020-04-05 本文已影响0人
小本YuDL
1. 什么是WebScoket协议？
- WebScoket是HTML5的一个持久化协议，实现了浏览器与服务器的双全工通信，同时也是跨域的一种解决方法。
- WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
- WebScoket和HTTP 都是应用层协议，其基于TCP协议。WebScoket在建立连接时需要借助HTTP协议，连接建立好了之后 客户端与浏览器之间就可以进行双向通信了，就与HTTP无关了。
- 一般有实时数据要求的会考虑 websocket
- 目前唯一的问题是：不兼容低版本的IE
2.使用 WebScoket与Ajax 有什么区别？
比如，利用很多网站的推送技术，来分析：
- 使用Ajax轮询：轮询是特定的时间间隔，对服务器发出http请求，然后服务器返回最新的数据给客户端。
- 缺点：浏览器需要不断的向服务端发送请求，但是请求的头可能就很长，实际的数据只占一小部分，就造成了带宽的浪费。
- 使用 WebScoket协议，能更快的节省服务器资源和带宽，并且能时时通讯。
交互对比图
3.WebSocket建立连接过程
由上图可以看出其连接过程
- 客户端浏览器首先要向服务器发起一个 HTTP 请求，求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求
- 服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了
- 双方就可以通过这个连接通道自由的传递信息
- 连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接
4.如何使用？
- 1.创建WebSocket对象
var Socket = new WebSocket(url, [protocol] );
- 第一个参数：指定连接的url
- 第二个参数：指定可接受的子协议 [可选]
-
- 使用WebSocket 事件
- open事件：建立连接时触发， 使用 send() 方法发送数据
ws.onopen = function() { ws.send("发送数据"); alert("数据发送中..."); }; - message事件：客户端接收服务端数据时触发，用于接收数据
ws.onmessage = function (evt) { var res_data = evt.data; alert("数据已接收..."); }; - close事件：连接关闭时触发
ws.onclose = function() { alert("连接已关闭..."); }; - error事件：连接发生错误时触发
5. 使用实例
- webScoket.html
<body>
<div>
<h2>Why do you always like to stay with me？</h2>
<button onclick="my_scoket()">查看回答</button>
</div>
<script>
function my_scoket(){
let scoket = new WebSocket('ws://localhost:3000');
//向服务器发送数据
scoket.onopen = function () {
scoket.send("Why do you always like to stay with me?")
};
//接收服务器返回的数据
scoket.onmessage = function (e) {
alert(e.data)
}
}
</script>
</body>
- server.js
const express = require('express');
const app = express();
const WebSocket = require('ws');
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function (ws) {
ws.on('message',function (data) {
console.log(data); //接收到的客户端数据
ws.send('I need you');//发送给客户端的数据
})
});
-
效果图
点击按钮，进行数据通信
