VBMAN SSE2 Advanced Server Push Example

Overview

This example builds upon the basic SSE example to demonstrate more complex real-time data push scenarios, including separated handling of data display and sending, as well as more flexible data push patterns.

Project Structure

SSE2/
  ├── src/                   # Server-side project
  │   ├── Form1.frm         # Main form
  │   ├── bShowData.cls     # Data display class
  │   ├── bSendData.cls     # Data sending class
  │   ├── ToolsMath.bas     # Math utility module 
  │   ├── ToolsWindow.bas   # Window utility module
  │   └── VBMAN_DEMO_SSE2.vbp # Project file
  └── www/                  # Frontend pages
      ├── index.html       # Main page
      └── js/             # Frontend scripts
          └── app.js      # SSE client implementation

Core Code Analysis

1. Server Configuration (Form1.frm)

Public HttpServer As New VBMANLIB.cHttpServer

Private Sub Form_Load()
    With HttpServer
        'Register data display and sending handler classes
        .Router.Reg "ShowData", New bShowData
        .Router.Reg "SendData", New bSendData
        
        'Enable cross-domain and auto routing
        .Router.AutoRoute = True
        .CrossDomain.Enable = True
        
        'Enable SSE
        .SSE.Start
        
        'Start server
        .Start 82, App.Path & "\..\www"
        
        'Display server status
        Label1.Caption = "Server running..."
    End With
    
    Shell "explorer http://127.0.0.1:82/"
End Sub

'Manually push test data
Private Sub Command1_Click()
    HttpServer.SSE.SendPack "testData", Text2.Text
End Sub

2. Data Display Class (bShowData.cls)

Public Sub List(ctx As cHttpServerContext)
    'Simulate getting data from data source
    Dim data As New Collection
    With data
        .Add "Data Item 1"
        .Add "Data Item 2"
        .Add "Data Item 3"
    End With
    
    'Return data in JSON format
    ctx.Response.Json data
End Sub

Public Sub Detail(ctx As cHttpServerContext)
    Dim id As String: id = ctx.Request.QueryString("id")
    
    'Return detailed data
    With ctx.Response.NewJson
        .Item("id") = id
        .Item("name") = "Test Data " & id
        .Item("time") = Now()
    End With
End Sub

3. Data Sending Class (bSendData.cls)

Public Sub Push(ctx As cHttpServerContext)
    'Get push data
    Dim data As String: data = ctx.Request.Form("data")
    
    'Push to all connected clients
    Form1.HttpServer.SSE.SendPack "newData", data
    
    'Record to log list
    Form1.List1.AddItem Now() & " - " & data
    
    'Return success
    ctx.Response.Json True
End Sub

4. Client Implementation (app.js)

class DataMonitor {
    constructor() {
        // Create SSE connection
        this.source = new EventSource('/sse');
        
        // Configure event listeners
        this.source.addEventListener('newData', this.handleNewData.bind(this));
        this.source.addEventListener('testData', this.handleTestData.bind(this));
        
        // Error handling
        this.source.onerror = this.handleError.bind(this);
    }
    
    handleNewData(e) {
        // Handle new data
        const data = JSON.parse(e.data);
        this.updateUI(data);
    }
    
    handleTestData(e) {
        // Handle test data
        console.log('Received test data:', e.data);
    }
    
    handleError(e) {
        console.error('SSE connection error:', e);
        // Implement reconnection logic
    }
    
    updateUI(data) {
        // Update page display
    }
}

// Initialize monitoring
new DataMonitor();

Feature Description

1. Separated Data Processing

   • Separation of display logic and sending logic
   • Modular data processing
   • Clear responsibility division
   • Extensible architecture design

2. Advanced Push Features

   • Data broadcast pushing
   • Logging functionality
   • Multiple data format support
   • Error handling mechanism

3. Enhanced Client Features

   • Object-oriented implementation
   • Modular event handling
   • Complete error handling
   • Automatic UI updates

Technical Points

1. Modular design
2. Separated data processing
3. Two-way communication implementation
4. Real-time interface updates

Use Cases

1. Complex data monitoring systems
2. Multi-source data integration display
3. Real-time data analysis platform
4. Monitoring and alerting systems

Extension Suggestions

1. Add data filters
2. Implement data persistence
3. Add data validation mechanism
4. Implement data polling backup
5. Add performance monitoring