websocket深入理解原理及拓展

最新推荐文章于 2024-08-30 14:39:05 发布

李狗蛋2333

最新推荐文章于 2024-08-30 14:39:05 发布

阅读量741

点赞数

分类专栏：前端技巧

本文链接：https://blog.csdn.net/ligoudan233/article/details/95613374

版权

本文深入探讨WebSocket协议原理，介绍WebSocket API的使用，包括创建实例、发送和接收数据、关闭连接等。此外，还讨论了WebSocket的高级应用，如数据加密传输、心跳检测、数据处理等，帮助提升WebSocket在实际项目中的应用水平。

摘要由CSDN通过智能技术生成

websocket深入理解

1.websocket原理

websocket原理在之前的博客中生动形象的描述过了,这里大概介绍一下

百度对于websocket的解释是:WebSocket是一种在单个TCP连接上进行全双工通信的协议

也就是说websocket是基于TCP协议可以进行双向通信的一个工具

并且websocket在建立服务器和客户端直接的连接的时候只需要完成一次握手,即可实现双向通信,不像发送ajax协议需要实现三次握手四次挥手,并且websocket的实时性,和控制开销,更好的连接状态的保持都是优于ajax

websocket的诞生是人们为了解决实时推送技术,因为之前全是使用的ajax轮询,也就是使用ajax技术在特定的时间内发送http请求,然后服务器返回数据给客户端的浏览器,这样的效率其实很慢,因为ajax发送出去的http请求可能含有较长的头部,然而真正有效的数据可能仅仅是后面那一部分,所以浪费了服务器带宽,而且比较新一点的技术做轮询的是Comet,这种技术实现了双向通信,但是依然是含有较长的头部,浪费带宽

2.websocketAPI

补充

补充一点,websocket使用的是http的101状态码建立连接,如下图:

_blank

再补充一点,部分浏览器可能不支持websocket接口,你可以在浏览器中尝试实例,目前现代主流浏览器都支持websocket: Chrome, Mozilla, Opera 和 Safari

API

1.创建一个websocket实例

  // 打开一个 web socket
  var ws = new WebSocket("ws://后端提供的websocket地址");

2.开启websocket并发送数据给后端地址

               ws.onopen = function()
               {
   
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };

onopen方法为打开websocket连接,其中ws为上面创建的websocket的实例

send方法为发送数据的方法,其中本次发送字符串"发送数据"内容

3.通过websocket接受后端发送过来的数据

               ws.onmessage = function (evt) 
               {
    
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };

之前也说过,websocket为双向通信,有发即有收

onmessage函数为接受数据,在函数中可传入evt行参来接受数据

4.websocket关闭函数

为什么要说websocket关闭函数?因为只有在触发websocket关闭的时候才会触发的函数(是不是有点废话了)

为什么这么说呢?关闭可能存在很多种情况,后端关闭,前端关闭,通信关闭都会触发

               ws.onclose = function()
               {
    
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };

5.自测浏览器是否支持websocket

这个应该在开始说的,一般现代浏览器都支持websocket,在MDN上面也有兼容图,我就直接贴在这里了

在这里插入图片描述

当然你也可以用代码的形式来检验你的浏览器是否支持websocket

 		if ("WebSocket" in window)
            {
   
               alert("您的浏览器支持 WebSocket!");
            }else {
   
                alert("您的浏览器不支持 WebSocket!")
            }

当然,你也可以看出来,如果说浏览器支持websocket,即浏览器window对象中含有websocket对象

3.简单的websocket测试

你可以用以下代码来进行websocket的自测

可以打开调试工具来监听websocket

注意:此代码的自测网站会将你发送的websocket请求全部以websocket形式发送给你,所以,发送我写了循环9999次,所以接受也会有9999条数据打印到控制台

直接贴代码:

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>websocket测试</title>
        <div id="message"></div>
      <script type="text/javascript">
         function WebSocketTest()
         {
    
            if ("WebSocket" in window)
            {
    
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://echo.websocket.org");
                
               ws.onopen = function()
               {