Server-sent Events(SSE) 运用实例分享：在线客服实时推送

介绍

Server-sent Events(SSE) 是一种 HTTP 的实时通信技术，它允许服务器主动向客户端推送数据。与传统的轮询(Polling) 和长轮询(Long Polling) 技术不同，SSE 可以通过简单的 HTTP 建立起长连接，从而节约带宽和减少延迟。在前端开发中，SSE 技术可以应用于在线客服、消息提醒等实时推送场景，实现交互体验的优化。

本文将以在线客服实时推送为例，分享 SSE 技术的运用实例，同时提供详细的示例代码和学习指导。

实现场景

假设我们正在开发一个在线客服系统，需要实现客服实时接收用户发来的消息并进行回复的功能。传统的实现方式是通过轮询或长轮询来定时检查服务端是否有新的消息，但这样会造成频繁的 HTTP 请求和服务器资源浪费。借助 SSE 技术，我们可以实现以下场景：

• 在用户发来消息后，服务器将实时推送消息给客服端
• 客服端在接收到新消息后，可以实时将回复发送给服务端

实现步骤

1. 创建 SSE 连接

const eventSource = new EventSource('/path-to-sse', { withCredentials: true })

这里我们使用 EventSource 构造函数来创建 SSE 连接。/path-to-sse 指的是 SSE 服务端地址，可以是一个 HTTP 接口，处理后返回 SSE 格式数据。

withCredentials 为可选参数，如果服务端需要进行身份验证，则需要设置该参数为 true。

1. 处理 SSE 数据

eventSource.addEventListener('message', function(event) {
  console.log('new message received: ', event.data)
})

在 SSE 连接建立后，服务端会不断推送消息给客户端。我们可以通过 addEventListener 方法监听 message 事件来处理 SSE 数据。

1. 发送消息

const xhr = new XMLHttpRequest()
xhr.open('POST', '/send-message', true)
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('message sent successfully')
  }
}
xhr.send(JSON.stringify({
  content: 'hello world',
  sender: 'user'
}))

当客服端需要发送消息时，我们可以使用 XMLHttpRequest 对象来向服务端发送 POST 请求。服务端接收到请求后，将消息推送给客户端。

完整示例代码

服务端代码

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const app = express()

app.use(cors())
app.use(bodyParser.json())

let clients = []

app.post('/send-message', (req, res) => {
  const message = req.body
  clients.forEach(client => {
    client.write(`data: ${JSON.stringify(message)}\n\n`)
  })
  res.sendStatus(200)
})

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

  res.write('\n')

  clients.push(res)

  req.on('close', () => {
    clients = clients.filter(client => client !== res)
  })
})

app.listen(3000, () => console.log('Server started'))

客户端代码

const eventSource = new EventSource('http://localhost:3000/sse', { withCredentials: true })

eventSource.addEventListener('message', function(event) {
  console.log('new message received: ', event.data)
})

const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:3000/send-message', true)
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('message sent successfully')
  }
}
xhr.send(JSON.stringify({
  content: 'hello world',
  sender: 'user'
}))

总结

本文介绍了 SSE 技术在在线客服实时推送中的运用，包括 SSE 连接的创建、数据的处理和消息的发送。通过 SSE 技术，我们可以优化在线客服的交互体验，减少服务器资源浪费和网络延迟。建议在实际项目中，多考虑 SSE 技术的应用场景，并进行实践。

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