前端 - vue项目怎样实现：新消息推送、实时更新、推送通知功能，有哪些实现方法？

Question

如题：
我用的是定时请求接口数据。
请问还有哪些常用方法吗？
谢谢

Answer 1

可以考虑服务分离，推送服务用 node.js来实现
前端:socket.io-client
node.js: socket.io , node服务 暴露接口 让后端调接口 然后nodejs socket.emit推送。

Answer 2

在浏览器上实现新消息推送，大概就只有三种方式：

1. http接口轮询。
2. websocket/SSE连接。
3. 还有一种调用浏览器的Push API，可以实现离线推送。

Answer 3

前端用 WebSocket 就行了, 不过也需要后台与服务器配合需要一定的成本需要业务衡量是否使用

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

也可以试试SSE:

https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

Answer 4

Socket长连接

Answer 5

在 Vue 项目中实现新消息推送、实时更新、推送通知功能，除了定时请求接口数据外，还有以下几种常用方法：

1. WebSockets：WebSockets 是一种在用户的浏览器和服务器之间建立持久连接的技术。这种连接允许实时双向通信，非常适合实现实时更新和推送通知功能。你可以使用如 Socket.IO 这样的库来简化 WebSocket 的使用。
2. Server-Sent Events (SSE)：SSE 是一种允许服务器向客户端推送信息的简单技术。与 WebSockets 不同，SSE 是单向的，只允许服务器向客户端发送数据。如果你的应用只需要接收实时更新，而不需要双向通信，那么 SSE 是一个很好的选择。
3. 长轮询 (Long Polling)：长轮询是一种模拟实时更新的技术。客户端发起一个请求到服务器，服务器保持这个连接打开，直到有新的数据可用或者超时。当有新数据时，服务器将数据发送给客户端，然后关闭连接。客户端再次发起新的请求，如此循环。虽然长轮询不如 WebSockets 和 SSE 高效，但在某些情况下，如服务器不支持 WebSockets，它仍然是一个可行的选择。
4. 使用第三方服务：有些第三方服务，如 Firebase Cloud Messaging、OneSignal 等，提供了推送通知的功能。这些服务通常与你的后端服务集成，允许你发送通知到用户的设备。

在选择实现方法时，你需要考虑你的应用需求、服务器支持、用户设备兼容性等因素。例如，如果你的应用需要双向实时通信，那么 WebSockets 是最好的选择。如果你的应用只需要接收更新，而不需要实时通信，那么 SSE 或长轮询可能更合适。如果你需要向用户的设备发送推送通知，那么使用第三方服务可能是一个好选择。