SSE 和 Websocket 的区别及应用场景-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实时通信已经成为了一个必需品。而 SSE 和 Websocket 是两种常用的实现方式。虽然它们的目的都是实现实时通信，但在使用上却有着明显的区别。本文将会详细介绍 SSE 和 Websocket 的区别及应用场景，并提供相应的示例代码。

SSE

SSE（Server-Sent Events，服务器推送事件）是一种浏览器与服务器实现实时通信的方式。与传统的 Ajax 轮询方式相比，SSE 不需要客户端频繁发起请求，而是通过服务器实时推送数据到客户端，使得客户端可以实现真正的实时通信。

实现方式

使用 SSE 的客户端需要通过 EventSource 对象来建立与服务器的连接。在服务器端，需要发送格式为 text/event-stream 的数据；在客户端，需要监听 message 事件来接收数据。

以下是服务器端代码：

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

http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream', // 数据格式
        'Cache-Control': 'no-cache', // 不缓存
        'Connection': 'keep-alive' // 保持长连接
    });

    setInterval(() => {
        let date = new Date().toLocaleTimeString();
        res.write(`data: ${date}\n\n`); // 发送数据
    }, 1000);

}).listen(8080);

console.log('server is listening on 8080');

以下是客户端代码：

const es = new EventSource('http://localhost:8080');

es.addEventListener('message', function(e) {
    console.log(e.data); // 接收数据
});

优缺点

SSE 的优点在于简单易用，可以直接使用浏览器内置的 EventSource 对象来建立连接并接收数据。并且，每个连接只需要占用一个 TCP 连接，可以减轻服务器压力。缺点在于，SSE 只支持数据的单向推送，即只能由服务器向客户端推送数据，不支持客户端向服务器发送数据。

应用场景

SSE 适合于服务器需要发送实时消息给客户端的场景，例如股票行情，即时聊天等。

Websocket

Websocket 是一种双向通信的实时通信协议，它可以在一个 TCP 连接上进行全双工通信。客户端和服务器之间可以直接发送 JSON、二进制数据等。与 SSE 不同，Websocket 是一种协议，需要使用相应的库或框架来实现。

实现方式

在客户端中，可以使用原生的 WebSocket 对象来建立连接。在服务器端中，需要使用相应的库或框架来实现 Websocket 服务，例如 node.js 中可以使用 ws 模块。

以下是服务器端代码：

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

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

server.on('connection', function(ws) {
    console.log('client connected');

    ws.on('message', function(message) {
        console.log(message);
        ws.send(`server: ${message}`);
    });

    ws.on('close', function() {
        console.log('client disconnected');
    });

});

console.log('server is listening on 8080');

以下是客户端代码：

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

ws.addEventListener('open', function() {
    console.log('connected');
});

ws.addEventListener('message', function(e) {
    console.log(e.data);
});

ws.addEventListener('close', function() {
    console.log('disconnected');
});

ws.send('hello world');

优缺点

Websocket 的优点在于支持双向通信，客户端和服务器可以直接发送数据，适合于当客户端需要频繁与服务端交互时。缺点在于相对于 SSE，Websocket 实现起来更加复杂，需要使用相应的库或框架来实现。

应用场景

Websocket 适合于需要客户端和服务端双向通信的应用场景，例如多人在线游戏、图形化编辑器等。

总结

无论是 SSE 还是 Websocket，都有其独特的应用场景。在选择时，需要根据实际需求来进行选择。如果是单向通信，且客户端接收数据比较频繁，可以选择 SSE。如果是需要双向通信，且客户端和服务器需要频繁交互，可以选择 Websocket。在实际应用中，可以根据需求来选择适合的实现方式。

在开发过程中，可以使用相应的库或框架来实现，这样可以大大减少开发难度和时间。例如在 React 开发中，可以使用 react-websocket 来实现 Websocket 通信。以下是相应代码：

// javascriptcn.com 代码示例
import React, { useEffect, useRef, useState } from 'react';
import WebSocket from 'react-websocket';

function App() {
  const wsRef = useRef(null);
  const [message, setMessage] = useState('');

  function handleOpen() {
    console.log('connected');
  }

  function handleMessage(data) {
    setMessage(data);
  }

  function handleClose() {
    console.log('disconnected');
  }

  function handleClick() {
    wsRef.current.sendMessage('hello world');
  }

  return (
    <div>
      <WebSocket
        url="ws://localhost:8080"
        onOpen={handleOpen}
        onMessage={handleMessage}
        onClose={handleClose}
        ref={wsRef}
      />
      <button onClick={handleClick}>send message</button>
      <div>{message}</div>
    </div>
  );
}

export default App;

以上就是本文介绍的 SSE 和 Websocket 的区别及应用场景，希望能对读者有所帮助。

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