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');//发送给客户端的数据
})
});
-
效果图