什么是WebSocket

html

发布日期: 2020-09-16

更新日期: 2022-11-02

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

一、什么是WebSocket

WebSocket是HTML5下一种新的协议（WebSocket是一种在单个TCP连接上进行全双工通信的协议）。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket是一个持久化的协议

二、WebSocket的原理

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

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

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

它约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信。

在WebSocket出现之前，web交互一般是基于HTTP协议的短连接或者长连接。

WebSocket是一种全新的协议，不属于HTTP无状态协议，协议名为“ws“

var websocket = null;
//判断当前浏览器是否支持WebSocket  
if ('WebSocket' in window) {
    websocket = initWebSocket()
    console.log(websocket);
} else {
    alert('当前浏览器 Not support websocket')
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
window.onbeforeunload = function() {
    closeWebSocket();
}

//初始化
function initWebSocket() {
    websocket = new WebSocket("ws:\\192.168.65.26:4000/msgws/112"); // 本地环境
    //连接发生错误的回调方法  
    websocket.onerror = function() {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法  
    websocket.onopen = function() {
        setMessageInnerHTML("WebSocket连接成功");
    };
    //接收到消息的回调方法  
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    };
    //连接关闭的回调方法  
    websocket.onclose = function() {
        setMessageInnerHTML("WebSocket连接关闭");
    };
    return websocket
}
//将消息显示在网页上  
function setMessageInnerHTML(innerHTML) {
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭WebSocket连接  
function closeWebSocket() {
    websocket.close();
}
//发送消息  
function send() {
    var message = "hello world";
    websocket.send(message);
}