1. Toy模板网首页
  2. >Toy博客

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

1年前作者：IT·陈寒分类：Toy博客阅读(11)违法举报

这篇具有很好参考价值的文章主要介绍了IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。


IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

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

  • ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
  • ✨博客主页：IT·陈寒的博客
  • 🎈该系列文章专栏：Java面试技巧
  • 📜其他专栏：Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
  • 🍹文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
  • 📜 欢迎大家关注！ ❤️

1. 引言

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

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

2. 短轮询（Short Polling）

2.1 原理

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

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

2.2 代码示例

2.2.1 服务器端（Node.js）
const express = require('express');
const app = express();

app.get('/poll', (req, res) => {
  // 模拟有新消息的情况
  const hasNewMessage = Math.random() < 0.5;

  if (hasNewMessage) {
    res.send('New message');
  } else {
    res.status(204).send(); // No Content
  }
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
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 原理

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

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

3.2 代码示例

3.2.1 服务器端（Node.js）
const express = require('express');
const app = express();

app.get('/long-poll', (req, res) => {
  // 模拟有新消息的情况
  const hasNewMessage = Math.random() < 0.5;

  if (hasNewMessage) {
    res.send('New message');
  } else {
    // 模拟长轮询，延迟5秒钟再回复
    setTimeout(() => {
      res.send('No new message after waiting');
    }, 5000);
  }
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
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 监听服务器发送的事件。

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

4.2 代码示例

4.2.1 服务器端（Node.js）
const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  // 设置 SSE 头信息
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  // 模拟定时向客户端推送消息
  const intervalId = setInterval(() => {
    const hasNewMessage = Math.random() < 0.5;
    if (hasNewMessage) {
      res.write(`data: New message\n\n`);
    }
  }, 1000);

  // 当客户端断开连接时清除定时器
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
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 提供了更低的延迟和更高的效率。

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络

5.2 代码示例

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

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

npm install ws

然后，创建 WebSocket 服务器：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  // 模拟定时向客户端推送消息
  const intervalId = setInterval(() => {
    const hasNewMessage = Math.random() < 0.5;
    if (hasNewMessage) {
      ws.send('New message');
    }
  }, 1000);

  // 当客户端断开连接时清除定时器
  ws.on('close', () => {
    clearInterval(intervalId);
  });
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
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学习路线】2023年完整版Java学习路线图
  • 【AIGC人工智能】Chat GPT是什么，初学者怎么使用Chat GPT，需要注意些什么
  • 【Java实战项目】SpringBoot+SSM实战：打造高效便捷的企业级Java外卖订购系统
  • 【数据结构学习】从零起步：学习数据结构的完整路径

IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket,Web前端框架,Java学习路线,微服务架构设计,websocket,网络协议,网络文章来源地址https://www.toymoban.com/news/detail-751758.html

到了这里，关于IM通信技术快速入门：短轮询、长轮询、SSE、WebSocket的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • 什么是 HTTP 长轮询？

    什么是 HTTP 长轮询？

    Web 应用程序最初是围绕客户端/服务器模型开发的，其中 Web 客户端始终是事务的发起者，向服务器请求数据。因此，没有任何机制可以让服务器在没有客户端先发出请求的情况下独立地向客户端发送或推送数据。 为了克服这个缺陷，Web 应用程序开发人员可以实施一种称为

    2024年02月15日
    浏览(13)
  • Tomcat长轮询原理与源码解析

    Tomcat长轮询原理与源码解析

    系列文章目录和关于我 最近在看工作使用到的配置中心原理，发现大多数配置中心在推和拉模型上做的选择出奇的一致选择了 基于长轮询的拉模型 基于拉模型的客户端轮询的方案 客户端通过轮询方式发现服务端的配置变更事件。轮询的频率决定了动态配置获取的实时性。

    2023年04月16日
    浏览(9)
  • 物联网通信技术

    物联网通信技术

    UWB：超宽带无线通信技术（UWB）是一种无载波通信技术，UWB不使用载波，而是使用短的能量脉冲序列，并通过正交频分调制或直接排序将脉冲扩展到一个频率范围内。 NFC：全称是Near Field  Communication，即“近场通信”，也叫“近距离无线通信”。 ARQ：自动重传请求（Automati

    2024年02月09日
    浏览(9)
  • 浅谈卫星通信技术

    浅谈卫星通信技术

    目录 1.卫星的概念 2.卫星的具体作用 3.利用卫星进行通信的优势 4.卫星通信带来的技术变革         卫星是指在地球轨道上运行的天体或人造物体。一般来说，我们所说的卫星主要指人造卫星，它是由人类设计、制造并送入轨道的人造宇宙飞行器。         人造卫星通

    2024年02月11日
    浏览(10)

  • AsyncContext优雅实现HTTP长轮询接口

    接到一个需求，实现方案时需要提供一个HTTP接口，接口需要hold住5-8秒，轮询查询数据库，一旦数据库中值有变化，取出变化的值进行处理，处理完成后返回响应。这不就是长轮询吗，如何优雅的实现呢？ 在这之前先简单介绍下长连接和短连接 HTTP长链接（Keep-Alive） 概念：

    2024年02月09日
    浏览(10)

  • RocketMQ的长轮询(Long Polling)实现分析

    目录 前言 长轮询 1.实现步骤 1.1客户端轮询发送请求 1.2服务端处理数据 1.3客户端接收数据 2.实现实例 RocketMQ长轮询 1.PullMessage服务 2.PullMessageProcessor服务 3.PullCallback回调 总结 消息队列一般在消费端都会提供push和pull两种模式，RocketMQ同样实现了这两种模式，分别提供了两个实

    2024年02月07日
    浏览(10)
  • 世界前沿技术发展报告2023《世界信息技术发展报告》（六）网络与通信技术

    世界前沿技术发展报告2023《世界信息技术发展报告》（六）网络与通信技术

    资料来自：《世界前沿技术发展报告2023》和网络 随着满足智慧交互、沉浸式拓展现实(Extended Reality, XR)全息通信、数字孪生等新兴技术的超高速率传输需求，新一代通信技术成为全球研究热点。伴随着5G在全球范围内的陆续应用，全球通信强国正开启对下一代网络技术6G的研发

    2024年02月07日
    浏览(16)

  • SpringBoot 集成 WebSocket 通信技术

    作者：禅与计算机程序设计艺术 WebSocket 是一种基于 TCP 的协议，它提供双向通信信道，可以实现浏览器和服务器端的全双工通信。通过 WebSocket ，网页应用可以实时地接收服务端传来的消息，并根据需要给予响应；也可以将用户操作如鼠标拖动、键盘输入等实时发送到服务端

    2024年02月07日
    浏览(10)

  • 无线网络通信技术详细介绍

    以下是对各类网络各自常见和常用的通信技术进行简单介绍。 一、无线广域网(WWAN) 无线广域网WWAN(Wireless Wide Area Networks)主要是为了满足超出一个城市范围的信息交流和网际接入需求，让用户可以和在遥远地方的公众或私人网络建立无线连接。在无线广域网的通信中一般要用

    2024年02月08日
    浏览(11)
  • 物联网中的通信技术

    物联网中的通信技术

    阅读引言： 本文主要大致为大家带来物联网中的常见的通信方式的知识梳理。 目录 一、概述 二、无线通信技术 1.物联网电子标签 RFID 1.1 RFID 概念 1.2 RFID 系统组成 2.WI-FI技术 3.UWB技术 4.ZigBee技术 5.NFC技术 6.蓝牙技术 7.EnOcean技术              物联网的通信层担负着极其重

    2024年01月18日
    浏览(10)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包