VBMAN SSE2 高级服务器推送示例

概述

这个示例在基础 SSE 示例的基础上，展示了更复杂的实时数据推送场景，包括数据的展示和发送的分离处理，以及更灵活的数据推送模式。

项目结构

SSE2/
  ├── src/                   # 服务器端项目
  │   ├── Form1.frm         # 主窗体
  │   ├── bShowData.cls     # 数据展示类
  │   ├── bSendData.cls     # 数据发送类
  │   ├── ToolsMath.bas     # 数学工具模块 
  │   ├── ToolsWindow.bas   # 窗口工具模块
  │   └── VBMAN_DEMO_SSE2.vbp # 项目文件
  └── www/                  # 前端页面
      ├── index.html       # 主页面
      └── js/             # 前端脚本
          └── app.js      # SSE客户端实现

核心代码解析

1. 服务器端配置(Form1.frm)

Public HttpServer As New VBMANLIB.cHttpServer

Private Sub Form_Load()
    With HttpServer
        '注册数据展示和发送处理类
        .Router.Reg "ShowData", New bShowData
        .Router.Reg "SendData", New bSendData
        
        '启用跨域和自动路由
        .Router.AutoRoute = True
        .CrossDomain.Enable = True
        
        '启用 SSE
        .SSE.Start
        
        '启动服务器
        .Start 82, App.Path & "\..\www"
        
        '显示服务器状态
        Label1.Caption = "服务器运行中..."
    End With
    
    Shell "explorer http://127.0.0.1:82/"
End Sub

'手动推送测试数据
Private Sub Command1_Click()
    HttpServer.SSE.SendPack "testData", Text2.Text
End Sub

2. 数据展示类(bShowData.cls)

Public Sub List(ctx As cHttpServerContext)
    '模拟从数据源获取数据
    Dim data As New Collection
    With data
        .Add "数据项1"
        .Add "数据项2"
        .Add "数据项3"
    End With
    
    '返回JSON格式数据
    ctx.Response.Json data
End Sub

Public Sub Detail(ctx As cHttpServerContext)
    Dim id As String: id = ctx.Request.QueryString("id")
    
    '返回详细数据
    With ctx.Response.NewJson
        .Item("id") = id
        .Item("name") = "测试数据 " & id
        .Item("time") = Now()
    End With
End Sub

3. 数据发送类(bSendData.cls)

Public Sub Push(ctx As cHttpServerContext)
    '获取推送数据
    Dim data As String: data = ctx.Request.Form("data")
    
    '推送到所有连接的客户端
    Form1.HttpServer.SSE.SendPack "newData", data
    
    '记录到日志列表
    Form1.List1.AddItem Now() & " - " & data
    
    '返回成功
    ctx.Response.Json True
End Sub

4. 客户端实现(app.js)

class DataMonitor {
    constructor() {
        // 创建 SSE 连接
        this.source = new EventSource('/sse');
        
        // 配置事件监听
        this.source.addEventListener('newData', this.handleNewData.bind(this));
        this.source.addEventListener('testData', this.handleTestData.bind(this));
        
        // 错误处理
        this.source.onerror = this.handleError.bind(this);
    }
    
    handleNewData(e) {
        // 处理新数据
        const data = JSON.parse(e.data);
        this.updateUI(data);
    }
    
    handleTestData(e) {
        // 处理测试数据
        console.log('收到测试数据:', e.data);
    }
    
    handleError(e) {
        console.error('SSE连接错误:', e);
        // 实现重连逻辑
    }
    
    updateUI(data) {
        // 更新页面显示
    }
}

// 初始化监控
new DataMonitor();

功能说明

1. 数据处理分离

   • 展示逻辑与发送逻辑分离
   • 模块化的数据处理
   • 清晰的职责划分
   • 可扩展的架构设计

2. 高级推送特性

   • 数据广播推送
   • 日志记录功能
   • 多种数据格式支持
   • 错误处理机制

3. 客户端增强

   • 面向对象的实现
   • 模块化的事件处理
   • 完整的错误处理
   • UI自动更新

技术要点

1. 模块化设计
2. 数据处理分离
3. 双向通信实现
4. 界面实时更新

应用场景

1. 复杂数据监控系统
2. 多源数据整合展示
3. 实时数据分析平台
4. 监控告警系统

扩展建议

1. 添加数据过滤器
2. 实现数据持久化
3. 添加数据验证机制
4. 实现数据轮询备份
5. 添加性能监控