IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket

亦凉 2024-04-15 14:02 75阅读 0赞

#### 文章目录 ####

*   *  1. 引言
     *  2. 短轮询（Short Polling）
     *   *  2.1 原理
         *  2.2 代码示例
         *   *  2.2.1 服务器端（Node.js）
             *  2.2.2 客户端（HTML + JavaScript）
     *  3. 长轮询（Long Polling）
     *   *  3.1 原理
         *  3.2 代码示例
         *   *  3.2.1 服务器端（Node.js）
             *  3.2.2 客户端（HTML + JavaScript）
     *  4. Server-Sent Events（SSE）
     *   *  4.1 原理
         *  4.2 代码示例
         *   *  4.2.1 服务器端（Node.js）
             *  4.2.2 客户端（HTML + JavaScript）
     *  5. WebSocket
     *   *  5.1 原理
         *  5.2 代码示例
         *   *  5.2.1 服务器端（Node.js，使用 \`ws\` 库）
             *  5.2.2 客户端（HTML + JavaScript）
     *  6. 拓展与分析
     *   *  6.1 比较与选择
         *  6.2 安全性考虑
         *  6.3 适用场景
         *  6.4 未来发展趋势
     *  7. 总结

![在这里插入图片描述][579a429daf314744b995f37351b46548.gif_pic_center]

> ?IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket
> 
> --------------------
> 
>  *  ☆\* o(≧▽≦)o \*☆嗨~我是IT·陈寒?
>  *  ✨博客主页：[IT·陈寒的博客][IT]
>  *  ?该系列文章专栏：[Java面试技巧][Java]
>  *  ?其他专栏：[Java学习路线][Java 1] [Java面试技巧][Java] [Java实战项目][Java 2] [AIGC人工智能][AIGC] [数据结构学习][Link 1]
>  *  ?文章作者技术和水平有限，如果文中出现错误，希望大家能指正?
>  *  ? 欢迎大家关注！ ❤️

--------------------

### 1. 引言 ###

即时通讯（Instant Messaging，简称IM）已经成为现代应用中不可或缺的一部分。为了实现实时的消息传递，开发者需要选择合适的通信技术。本文将介绍四种常见的IM通信技术：短轮询、长轮询、Server-Sent Events（SSE）、WebSocket，并通过简单的代码示例来演示它们的实现方式。

![在这里插入图片描述][7fc7165f7ba1410f94186d665d9b8018.png_pic_center]

### 2. 短轮询（Short Polling） ###

#### 2.1 原理 ####

短轮询是一种简单的实时通信方法，客户端通过定时向服务器发送请求，服务器在每个请求中回复是否有新消息。这种方式的缺点是频繁的HTTP请求可能会导致服务器和带宽资源的浪费。

![在这里插入图片描述][bcbb4738ef0b4b4e836364e3472c5874.png_pic_center]

#### 2.2 代码示例 ####

##### 2.2.1 服务器端（Node.js） #####

##### 2.2.2 客户端（HTML + JavaScript） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Short Polling Example</title>
    </head>
    <body>
      <div id="messages"></div>
    
      <script>
        function poll() {
          
          fetch('/poll')
            .then(response => {
          
              if (!response.ok) {
          
                throw new Error('Network response was not ok');
              }
              return response.text();
            })
            .then(data => {
          
              if (data) {
          
                document.getElementById('messages').innerText = data;
              }
              poll(); // 继续下一次轮询
            })
            .catch(error => {
          
              console.error('Error during polling:', error);
              poll(); // 出错时也要继续下一次轮询
            });
        }
    
        // 初始启动轮询
        poll();
      </script>
    </body>
    </html>

### 3. 长轮询（Long Polling） ###

#### 3.1 原理 ####

长轮询是对短轮询的改进，客户端发送请求后，服务器只有在有新消息到达时才会立即回复，否则会等待一段时间再回复。这种方式降低了不必要的请求次数，但仍然存在一些延迟。

![在这里插入图片描述][8992cbb364d744da93e9943eb40bc3a3.png_pic_center]

#### 3.2 代码示例 ####

##### 3.2.1 服务器端（Node.js） #####

##### 3.2.2 客户端（HTML + JavaScript） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Long Polling Example</title>
    </head>
    <body>
      <div id="messages"></div>
    
      <script>
        function longPoll() {
          
          fetch('/long-poll')
            .then(response => {
          
              if (!response.ok) {
          
                throw new Error('Network response was not ok');
              }
              return response.text();
            })
            .then(data => {
          
              document.getElementById('messages').innerText = data;
              longPoll(); // 继续下一次轮询
            })
            .catch(error => {
          
              console.error('Error during long polling:', error);
              longPoll(); // 出错时也要继续下一次轮询
            });
        }
    
        // 初始启动长轮询
        longPoll();
      </script>
    </body>
    </html>

### 4. Server-Sent Events（SSE） ###

#### 4.1 原理 ####

Server-Sent Events（SSE）是一种基于单向通信的技术，允许服务器向客户端推送事件。与短轮询和长轮询不同，SSE 使用了持久连接，客户端只需通过 EventSource API 监听服务器发送的事件。

![在这里插入图片描述][330c59bf64a34a5195790eff252a66ff.png_pic_center]

#### 4.2 代码示例 ####

##### 4.2.1 服务器端（Node.js） #####

##### 4.2.2 客户端（HTML + JavaScript） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SSE Example</title>
    </head>
    <body>
      <div id="messages"></div>
    
      <script>
        const eventSource = new EventSource('/sse');
    
        eventSource.onmessage = (event) => {
          
          document.getElementById('messages').innerText = event.data;
        };
    
        eventSource.onerror = (error) => {
          
          console.error('Error during SSE:', error);
          eventSource.close();
        };
      </script>
    </body>
    </html>

### 5. WebSocket ###

#### 5.1 原理 ####

WebSocket 是一种双向通信协议，允许服务器主动向客户端推送消息，同时也允许客户端向服务器发送消息。相对于之前介绍的技术，WebSocket 提供了更低的延迟和更高的效率。

![在这里插入图片描述][b1c4567533a9424b93695b2aa0319399.png_pic_center]

#### 5.2 代码示例 ####

##### 5.2.1 服务器端（Node.js，使用 `ws` 库） #####

首先，确保你已经安装了 `ws` 库：

npm install ws

然后，创建 WebSocket 服务器：

##### 5.2.2 客户端（HTML + JavaScript） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WebSocket Example</title>
    </head>
    <body>
      <div id="messages"></div>
    
      <script>
        const socket = new WebSocket('ws://localhost:3000');
    
        socket.onmessage = (event) => {
          
          document.getElementById('messages').innerText = event.data;
        };
    
        socket.onclose = (event) => {
          
          console.error('WebSocket closed:', event);
        };
    
        socket.onerror = (error) => {
          
          console.error('WebSocket error:', error);
        };
      </script>
    </body>
    </html>

### 6. 拓展与分析 ###

#### 6.1 比较与选择 ####

*  **短轮询和长轮询：** 简单易实现，但频繁的HTTP请求可能导致资源浪费和延迟。适用于不要求实时性很高的场景。
 *  **SSE：** 提供了更好的实时性，但仍然基于HTTP，无法处理双向通信。适用于服务器向客户端推送信息的场景。
 *  **WebSocket：** 实现了双向通信，低延迟高效。适用于需要实时双向通信的场景，如在线聊天、实时协作等。

#### 6.2 安全性考虑 ####

在使用这些通信技术时，安全性是一个需要考虑的因素。WebSocket 提供了一些安全性的标准，而 HTTP 请求则可能需要额外的安全层，如 SSL/TLS。

#### 6.3 适用场景 ####

*  **短轮询和长轮询：** 适用于实时性要求不高的场景，例如论坛的消息提醒。
 *  **SSE：** 适用于服务器向客户端单向推送信息的场景，如实时新闻、股票行情等。
 *  **WebSocket：** 适用于实时双向通信的场景，如在线聊天、实时协作等。

#### 6.4 未来发展趋势 ####

随着技术的不断发展，WebSocket 的应用范围会逐渐扩大，尤其是在实时性要求较高的应用中。然而，其他技术仍然有其适用的场景，因此在选择时需根据具体需求权衡各种因素。

### 7. 总结 ###

IM通信技术是现代应用中至关重要的一部分，开发者可以根据实际需求选择不同的通信技术。本文介绍了短轮询、长轮询、Server-Sent Events（SSE）、WebSocket 这四种通信技术的原理和实现方式，并通过简单的代码示例演示了它们的应用。在选择合适的通信技术时，需要根据实际场景的需求、安全性、性能等因素进行综合考虑。随着技术的不断发展，IM通信技术也会迎来更多的创新和改进，为开发者提供更多选择。

--------------------

> ?结尾 ❤️ 感谢您的支持和鼓励！ ??  
> ?您可能感兴趣的内容：
> 
>  *  【[Java面试技巧][Java]】[Java面试八股文 - 掌握面试必备知识（目录篇）][Java_ -]
>  *  【[Java学习路线][Java 1]】[2023年完整版Java学习路线图][2023_Java]
>  *  【[AIGC人工智能][AIGC]】[Chat GPT是什么，初学者怎么使用Chat GPT，需要注意些什么][Chat GPT_Chat GPT]
>  *  【[Java实战项目][Java 2]】[SpringBoot+SSM实战：打造高效便捷的企业级Java外卖订购系统][SpringBoot_SSM_Java]
>  *  【[数据结构学习][Link 1]】[从零起步：学习数据结构的完整路径][Link 2]
> 
> > ![在这里插入图片描述][0f4200e7c23b4f38842a4796bfccf8fa.png_pic_center]

[579a429daf314744b995f37351b46548.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/502be9d31673436d8abcfed33c278e43.gif
[IT]: https://blog.csdn.net/qq_43546721?type=blog
[Java]: https://blog.csdn.net/qq_43546721/category_12384780.html?spm=1001.2014.3001.5482
[Java 1]: https://blog.csdn.net/qq_43546721/category_12367981.html
[Java 2]: https://blog.csdn.net/qq_43546721/category_12378614.html?spm=1001.2014.3001.5482
[AIGC]: https://blog.csdn.net/qq_43546721/category_12369819.html?spm=1001.2014.3001.5482
[Link 1]: https://blog.csdn.net/qq_43546721/category_12417284.html?spm=1001.2014.3001.5482
[7fc7165f7ba1410f94186d665d9b8018.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/00d0f4b3432944dd813bdc3ec4b5b061.png
[bcbb4738ef0b4b4e836364e3472c5874.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/281ac467dd604cdabaaa1158e8d1a5fd.png
[8992cbb364d744da93e9943eb40bc3a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/06c43984e9bc43d086548f19e0292be8.png
[330c59bf64a34a5195790eff252a66ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/b9861867d43a482c9e15893a14ec9cb1.png
[b1c4567533a9424b93695b2aa0319399.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/d362c368614f41a097063aab6ffef102.png
[Java_ -]: https://blog.csdn.net/qq_43546721/article/details/131832856
[2023_Java]: https://blog.csdn.net/qq_43546721/article/details/131550605
[Chat GPT_Chat GPT]: https://blog.csdn.net/qq_43546721/article/details/131866932
[SpringBoot_SSM_Java]: https://blog.csdn.net/qq_43546721/article/details/132119791
[Link 2]: https://blog.csdn.net/qq_43546721/article/details/132404477
[0f4200e7c23b4f38842a4796bfccf8fa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2cc8e32f6f1b4f5abeb4f490328a102b.png