websocket学习笔记

╰半橙微兮° 2022-10-11 14:57 140阅读 0赞

### 文章目录 ###

*   *  websocket学习笔记
     *   *  实现的方式

## websocket学习笔记 ##

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要 WebSocket ？  
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？  
答案很简单，因为 HTTP 协议有一个**缺陷**：通信只能由客户端发起。  
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。  
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的**全双工通信**，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有即时通信、实时数据、订阅推送等功能的应用。

### 实现的方式 ###

//先握手，并查看客户端的浏览器是否支持websocket协议
    //连接发生错误的回调方法
    ws.onerror = function () { 
        alert("WebSocket连接发生错误");
    };
    
    //连接成功建立的回调方法
    ws.onopen = function () { 
        alert("WebSocket连接成功");
    }
    
    //接收到消息的回调方法，websocket的controller里的onMessage方法session_to传过来的值
    ws.onmessage = function (event) { 
        alert(event.data);
    }
     
    //连接关闭的回调方法
    ws.onclose = function () { 
        alert("WebSocket连接关闭");
    }
        
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () { 
        closeWebSocket();
    }
    
    function closeWebSocket(){ 
    	ws.close();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
nodejs实现websocket:

【其他代码可参考】[https://gitee.com/monkeyhlj/vue-learning/tree/master/20210809-WebSocket%E5%AD%A6%E4%B9%A0][https_gitee.com_monkeyhlj_vue-learning_tree_master_20210809-WebSocket_E5_AD_A6_E4_B9_A0]  
【Java实现可参考】[Java实现websocket][Java_websocket]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/35c7c24a72d345baad77037029615ad5.png
[https_gitee.com_monkeyhlj_vue-learning_tree_master_20210809-WebSocket_E5_AD_A6_E4_B9_A0]: https://gitee.com/monkeyhlj/vue-learning/tree/master/20210809-WebSocket%E5%AD%A6%E4%B9%A0
[Java_websocket]: https://www.cnblogs.com/onlymate/p/9521327.html