如何使用 SSE 和 WebSocket 完成即时通讯

即时通讯是现代互联网应用中不可或缺的一种功能，通过实时的消息交换，可以促进用户之间的沟通和互动。在前端开发中，一般采用 SSE 和 WebSocket 技术来实现即时通讯功能。

SSE 技术简介

SSE (Server-Sent Events) 是一种基于 HTTP 长连接的服务器向客户端推送数据的技术。客户端通过创建 EventSource 对象与服务器建立连接，在建立连接之后，服务器可以随时向客户端推送消息。SSE 允许服务器端主动推送数据，而不需要客户端通过轮询的方式获取数据。

SSE 技术的优点包括：

• 基于 HTTP 协议，无需额外的握手信息，充分利用现有的网络基础设施。
• 支持跨域访问，可以实现跨域的即时通讯功能。
• 适用于需要频繁推送小量数据的场景，运行效率高。

WebSocket 技术简介

WebSocket 是一种基于 TCP 协议的双向通信技术，允许客户端和服务器之间进行实时的数据交换。WebSocket 通过在 TCP 协议上实现了一个简单的应用层协议来实现双向通信。客户端和服务器之间可以随时发送消息，而不需要等待服务器的响应。

WebSocket 技术的优点包括：

• 支持双向通信，充分实现了实时互动的需求。
• 与 HTTP 协议兼容，可以利用现有的网络基础设施。
• 支持跨域访问。

使用 SSE 实现即时通讯

SSE 技术的主要实现流程如下：

1. 后端应用代码使用 SSE 协议向前端提供服务，开启长连接。
2. 前端通过 JavaScript 创建 EventSource 对象，与后端建立连接。
3. 后端将需要推送的数据作为 message 事件的数据，通过 send 方法发送至前端。
4. 前端通过监听 message 事件，获取推送的数据，进行处理。

以下是前端使用 SSE 实现即时通讯的示例代码：

// 前端实现
let eventSource = new EventSource('/push');

eventSource.addEventListener('message', function(event) {
    // 获取推送的数据
    let data = JSON.parse(event.data);
    // 处理推送的数据
    handleData(data);
});

eventSource.addEventListener('open', function(event) {
    console.log('连接已建立');
});

eventSource.addEventListener('error', function(event) {
    if (event.eventPhase === EventSource.CLOSED) {
        console.log('连接已关闭');
    }
});

后端代码示例：

# 后端实现（Flask 示例）
from flask import Flask, Response

app = Flask(__name__)

@app.route('/push')
def push():
    def generate():
        while True:
            # 生成推送的数据
            data = generateData()
            # 推送数据
            yield 'data: %s\n\n'%json.dumps(data)
    return Response(generate(), mimetype="text/event-stream")

使用 WebSocket 实现即时通讯

WebSocket 技术的实现流程如下：

1. 后端应用代码创建 WebSocket 服务，开启长连接。
2. 前端通过 JavaScript 创建 WebSocket 对象，与后端建立连接。
3. 通过 WebSocket 对象发送数据给后端（客户端发送事件）。
4. 后端向客户端推送数据（服务端发送事件）。
5. 前端通过监听 WebSocket 的 message 事件，获取推送的数据，进行处理。

以下是前端使用 WebSocket 实现即时通讯的示例代码：

// 前端实现
let ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
    console.log('连接已建立');
}

ws.onmessage = function(event) {
    // 获取推送的数据
    let data = JSON.parse(event.data);
    // 处理推送的数据
    handleData(data);
};

后端代码示例：

# 后端实现（Tornado 示例）
import tornado.ioloop
import tornado.web
import tornado.websocket
import json

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    def open(self):
        print('连接已建立')

    def on_message(self, message):
        # 处理客户端发送来的数据
        data = handleData(message)
        # 推送数据至客户端
        self.write_message(json.dumps(data))

    def on_close(self):
        print('连接已关闭')

app = tornado.web.Application([(r"/websocket", WebSocketHandler)])

if __name__ == "__main__":
    app.listen(8080)
    tornado.ioloop.IOLoop.current().start()

总结

本文介绍了使用 SSE 和 WebSocket 技术实现前端即时通讯的方法，分别从技术原理、优点和示例代码展开进行讲解，并对两种技术各自的优点进行比较。在实际开发中，开发者可以根据需求选择不同的技术进行实现，并根据需要进行性能测试和优化。

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