SSE 和 Websocket-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要实现实时通信功能，例如实时聊天、实时数据渲染等等。在这种情境下，基于 HTTP 请求的传统方式显然是不太适用的，因为它需要持续不断地发送请求，而这会占用大量的网络资源和带宽。因此，我们需要借助 SSE 和 Websocket 这两种技术来实现前端实时通信功能。

什么是 SSE？

SSE，全称为 Server-Sent Events，即服务端推送事件。它是一种基于 HTTP 的协议，通过单向的持久化连接（即浏览器向服务端创建一个不断开的连接）实现实时更新数据和事件的双向通信。

SSE 的优点

简单易用：与 Websocket 相比，SSE 的实现相对简单，只需要使用 EventSource 对象即可。
轻便高效：相对于长轮询等其他方法，SSE 不需要频繁地进行 HTTP 请求，而是通过持久化连接实现实时通信，使得数据交换变得更加高效。
兼容性好：大部分现代浏览器都支持 SSE。

SSE 的缺点

单向通信：SSE 是一种单向的通信方式，只能从服务端向客户端推送数据和事件，而不能反过来通信。
容易断开连接：由于连接只能由浏览器发起，如果使用的服务端存在某些问题，例如内存泄露、超时等，可能会导致连接断开。
不支持二进制数据传输：SSE 只支持纯文本的数据传递和事件推送，不适用于一些需要传递二进制数据的场景。

SSE 的应用场景

实时通知：例如新的聊天信息、邮件等通知。
实时数据更新：例如在线竞价、股票行情等实时更新的数据。

SSE 的示例代码

以下是一个使用 Node.js 实现 SSE 的示例代码。

服务端代码（使用 Node.js 和 Express 框架）：

// javascriptcn.com 代码示例
const app = require('express')()
const server = require('http').createServer(app)

app.get('/sse', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream', // 声明 SSE 类型
    'Cache-Control': 'no-cache', // 禁用 HTTP 缓存
    'Connection': 'keep-alive' // 开启持久化连接
  })

  setInterval(() => {
    let data = `data: ${new Date().toISOString()}\n\n` // 注意每条消息末尾需要两个换行符
    res.write(data)
  }, 1000) // 每隔一秒钟推送一条消息
})

server.listen(8080, () => {
  console.log('SSE server is running on port 8080');
})

客户端代码：

const sse = new EventSource('/sse')

sse.addEventListener('message', (event) => {
  console.log(event) // 输出新的消息
})

什么是 Websocket？

Websocket 是一种基于 TCP 的双向通信协议，它允许客户端和服务端建立一条持久化连接，实现实时通信和数据交互。

Websocket 的优点

双向通信：与 SSE 相比，Websocket 可以实现双向通信，客户端和服务端都可以发送和接收消息。
高效稳定：由于建立的是 TCP 连接，不需要频繁地发起和断开连接，使得 Websocket 可以更加高效和稳定。
支持二进制数据传输：Websocket 支持二进制和文本数据的传输，适用于各种不同的场景和需求。

Websocket 的缺点

实现较复杂：与 SSE 相比，Websocket 实现较为复杂，需要使用 Socket 对象等实现相对复杂的 API 接口。
兼容性稍差：虽然 Websocket 已经被大多数现代浏览器支持，但是仍然存在少数浏览器不支持的情况。

Websocket 的应用场景

实时游戏：例如在线多人游戏等需要实时通信的游戏。
实时协作：例如在线编辑、实时白板等需要实时协作的场景。

Websocket 的示例代码

以下是一个使用 Node.js 实现 Websocket 的示例代码。

服务端代码（使用 Node.js 和 WebSocket 库）：

// javascriptcn.com 代码示例
const WebSocket = require('ws')
const server = new WebSocket.Server({ port: 8080 })

server.on('connection', (socket) => {
  console.log('client connected')

  socket.on('message', (message) => {
    console.log('received message:', message)
    socket.send(`echo: ${message}`) // 回复客户端的消息
  })

  socket.on('close', () => {
    console.log('client disconnected')
  })
})

客户端代码：

// javascriptcn.com 代码示例
const socket = new WebSocket('ws://localhost:8080')

socket.onopen = () => {
  console.log('connected')
}

socket.onmessage = (event) => {
  console.log('received message:', event.data)
}

socket.onclose = () => {
  console.log('disconnected')
}

socket.send('hello') // 发送消息

总结

针对不同的场景和需求，我们可以选择使用 SSE 或者 Websocket 来实现前端实时通信功能。SSE 适合单向通信和简单的文本消息传输，而 Websocket 则更加适合双向通信和复杂的数据传输。在实际开发中，我们需要根据具体需求来选择合适的技术方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f7d767d4982a6eb90e992