WebSocket

136次阅读

共计 993 个字符,预计需要花费 3 分钟才能阅读完成。

1、websocket 是什么?解决客户端与服务端实时通信而产生的技术。先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接,然后服务端与客户端通过此 TCP 连接进行实时通信。服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。以前我们实现推送技术,用的都是轮询,在特定时间间隔由浏览器自动发出请求,主动拉取服务器消息。需要不断的向服务器发送请求,会占用大量的带宽和服务器资源。
2、使用 websocket 在支持 WebSocket 的浏览器中,在创建 socket 之后。可以通过 onopen,onmessage,onclose、onerror 四个事件实现对 socket 进行响应
只读属性 readyState 表示连接状态,可以是以下值:
0 – 表示连接尚未建立。
1 – 表示连接已建立,可以进行通信。
2 – 表示连接正在进行关闭。
3 – 表示连接已经关闭或者连接不能打开。

// window.WebSocket “WebSocket” in window 检测浏览器是否支持 WebSocket
var ws = new WebSocket(“ws://localhost:8080”);
// 申请一个 WebSocket 对象,参数是需要连接的服务器端的地址
// 同 http 协议使用 http:// 开头一样,WebSocket 协议的 URL 使用 ws:// 开头
// 另外安全的 WebSocket 协议使用 wss:// 开头。

// 指定连接成功后的回调函数
ws.onopen = function() {
console.log(“open”);
ws.send(“hello”);
// 用于向服务器发送数据
};
// 或者
ws.addEventListener(‘open’, function (event) {
ws.send(‘Hello Server!’);
});
// 指定收到服务器数据后的回调函数
ws.onmessage = function(evt) {
console.log(evt.data)
};
// 指定连接关闭后的回调函数
ws.onclose = function(evt) {
console.log(“WebSocketClosed!”);
};
// 指定报错时的回调函数
ws.onerror = function(evt) {
console.log(“WebSocketError!”);
};
// 关闭 websocket
websocket.close();

正文完
 0

webSocket

136次阅读

共计 1123 个字符,预计需要花费 3 分钟才能阅读完成。

webSocket 是什么
webSocket 是 HTML5 新出的一种协议,底层是基于 TCP/IP 协议的。跟 http 没有关系,只是复用了 http 握手通道,用来升级协议。
webSocket 的作用
轮询:客户端以一定的时间间隔向服务端发出请求,以频繁请求的方式来保持客户端和服务器端的同步。缺点:
浏览器需要不断的向服务器发出请求,然而 HTTP 请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
长轮询:浏览器向服务器发送请求,服务器将请求保持打开一段时间。如果在该时间段内收到通知,则将包含该消息的响应发送到客户端。如果在设定的时间段内未收到通知,则服务器发送响应以终止打开的请求。缺点:

当具有较高的消息量时,长轮询不会提供比传统轮询更大的性能改进
服务器端会阻塞请求直到有数据传递或超时才返回

使用 webSocket 浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。优点:

能更好的节省服务器资源和带宽
支持双向通信,实时性更强
可以发送文本,也可以发送二进制数据

webSocket 的使用
服务端:
var app = require(‘express’)();
var WebSocket = require(‘ws’);
var wss = new WebSocket.Server({port: 8080});
wss.on(‘connection’, function connection(ws) {
ws.on(‘message’, function incoming(message) {
console.log(message);
});
ws.send(‘the content from server’);
});
app.listen(3000,() => {
console.log(‘you are listening port 3000’);
});
客户端:
<script>
var ws = new WebSocket(‘ws://localhost:8080’);
ws.onopen = function () {
ws.send(‘the request from client’);
};
ws.onmessage = function (e) {
console.log(‘from server: ‘ + e.data);
};
</script>
webSocket 应用场景
社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议 / 聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景
参考资料:

Comet:基于 HTTP 长连接的“服务器推”技术
Benefits of WebSocket
WebSocket:5 分钟从入门到精通
《web 性能优化权威指南》

正文完
 0