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)
vb
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)
vb
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)
vb
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)
javascript
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
Separated Data Processing
- Separation of display logic and sending logic
- Modular data processing
- Clear responsibility division
- Extensible architecture design
Advanced Push Features
- Data broadcast pushing
- Logging functionality
- Multiple data format support
- Error handling mechanism
Enhanced Client Features
- Object-oriented implementation
- Modular event handling
- Complete error handling
- Automatic UI updates
Technical Points
- Modular design
- Separated data processing
- Two-way communication implementation
- Real-time interface updates
Use Cases
- Complex data monitoring systems
- Multi-source data integration display
- Real-time data analysis platform
- Monitoring and alerting systems
Extension Suggestions
- Add data filters
- Implement data persistence
- Add data validation mechanism
- Implement data polling backup
- Add performance monitoring