SSE 与 WebSocket 的优缺点对比-JavaScript中文网-JavaScript教程资源分享门户

SSE 与 WebSocket 的优缺点对比

在前端开发中，实时性的需求日益增加。为了满足这种需求，前端开发人员需要使用一些实时通信技术。其中，SSE（Server-Sent Events）和 WebSocket 是两种常用的技术，它们都可以在客户端和服务器之间建立实时通信连接。但是，它们的实现方式和使用场景不同，下面将对它们的优缺点进行对比。

一、SSE 的优缺点

SSE 是一种基于 HTTP 协议的实时通信技术，它可以在客户端和服务器之间建立持久性连接，服务器可以向客户端发送事件流（event stream）。SSE 的优点有：

SSE 使用简单，不需要像 WebSocket 那样建立复杂的握手协议。
SSE 的实现基于 HTTP 协议，可以通过 HTTP 服务器来实现，不需要额外的协议或端口。
SSE 支持服务器推送，可以在服务器端推送事件流，这样客户端可以实时接收到数据。
SSE 支持自定义事件，可以通过自定义事件来实现更灵活的通信方式。

但是，SSE 也有一些缺点：

SSE 只能单向通信，即服务器只能向客户端发送数据，无法接收客户端的数据。
SSE 的兼容性不如 WebSocket 好，一些旧版本的浏览器可能不支持 SSE。
SSE 使用的是长轮询（long-polling）方式，客户端需要不断地向服务器发送请求，这样会增加服务器的负担。

二、WebSocket 的优缺点

WebSocket 是一种全双工通信协议，它可以在客户端和服务器之间建立双向的通信连接。WebSocket 的优点有：

WebSocket 支持双向通信，客户端可以向服务器发送数据，服务器也可以向客户端发送数据。
WebSocket 的实现不基于 HTTP 协议，可以通过独立的协议和端口来实现。
WebSocket 的兼容性比 SSE 好，大部分现代浏览器都支持 WebSocket。

但是，WebSocket 也有一些缺点：

WebSocket 的建立需要进行复杂的握手协议，这样会增加通信的延迟。
WebSocket 的实现需要服务器端的支持，一些 HTTP 服务器可能无法直接支持 WebSocket。
WebSocket 的通信方式比 SSE 更加复杂，需要使用一些专门的库或框架来实现。

三、SSE 和 WebSocket 的适用场景

SSE 和 WebSocket 都是实时通信技术，但是它们的使用场景不同。

SSE 适用于需要服务器推送数据的场景，例如新闻推送、股票行情等实时数据展示。
WebSocket 适用于需要双向通信的场景，例如在线聊天、游戏等需要实时交互的应用。

四、示例代码

下面是一个使用 SSE 实现服务器推送的示例代码：

服务器端代码：

// javascriptcn.com 代码示例
const http = require('http')

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleString()}\n\n`)
  }, 1000)
})

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

客户端代码：

// javascriptcn.com 代码示例
const eventSource = new EventSource('http://localhost:8080')

eventSource.addEventListener('message', (event) => {
  console.log(event.data)
})

eventSource.addEventListener('error', (event) => {
  console.log('Error occurred')
})

上面的代码实现了一个简单的 SSE 服务器，每秒钟向客户端推送当前时间。客户端可以通过 EventSource 对象来接收服务器推送的数据。如果服务器端发生错误，客户端可以通过 error 事件来进行处理。

下面是一个使用 WebSocket 实现在线聊天的示例代码：

服务器端代码：

// javascriptcn.com 代码示例
const WebSocket = require('ws')

const server = new WebSocket.Server({ port: 8080 })

server.on('connection', (socket) => {
  socket.on('message', (message) => {
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message)
      }
    })
  })
})

客户端代码：

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

socket.onopen = () => {
  console.log('Connected to server')
}

socket.onmessage = (event) => {
  console.log(event.data)
}

document.querySelector('#send').addEventListener('click', () => {
  const message = document.querySelector('#message').value
  socket.send(message)
})

上面的代码实现了一个简单的 WebSocket 聊天室，客户端可以通过输入框发送消息，服务器会将消息广播给所有在线用户。如果客户端收到服务器发送的消息，就会在控制台输出消息内容。

五、总结

SSE 和 WebSocket 都是实时通信技术，它们的优缺点和适用场景不同。在选择技术方案时，需要根据具体的需求来进行选择。如果需要服务器推送数据，可以选择 SSE；如果需要双向通信，可以选择 WebSocket。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506b3f995b1f8cacd26c471