| sidebar_position | 6 |
|---|
Creates a new Server-Sent Events instance.
| Parameter | Type | Required | Description |
|---|---|---|---|
url |
string | Yes | The URL endpoint that will send SSE events |
settings |
object | No | Configuration object with callbacks, options, headers, and events |
Returns an SSE instance object with the following methods and properties:
| Property/Method | Type | Description |
|---|---|---|
start() |
function | Start the SSE connection |
stop() |
function | Stop the SSE connection |
instance |
object | The underlying EventSource or Ajax instance |
type |
string | Connection type: 'event' (native) or 'ajax' (fallback) |
Called when the connection is established for the first time.
onOpen: function(e) {
console.log('Connection opened', e);
}Parameters:
event(object): The event object from EventSource or synthetic event from Ajax
Called when the connection is closed.
onEnd: function(e) {
console.log('Connection closed', e);
}Parameters:
event(object): The event object
Called when an error occurs.
onError: function(e) {
console.error('Connection error', e);
}Parameters:
event(object): The error event object
Called when a message is received without a custom event name.
onMessage: function(e) {
console.log('Data:', e.data);
console.log('ID:', e.lastEventId);
console.log('Origin:', e.origin);
}Parameters:
event(object): The message event objectdata(string): The message datalastEventId(string): The ID of the last eventorigin(string): The origin URLreturnValue(boolean): Alwaystrue
Configuration options for the SSE connection.
options: {
forceAjax: false
}| Option | Type | Default | Description |
|---|---|---|---|
forceAjax |
boolean | false |
Force Ajax polling even if EventSource is supported |
Custom HTTP headers to send with the request.
headers: {
'Authorization': 'Bearer token',
'X-Custom-Header': 'value'
}:::warning Providing custom headers automatically enables Ajax mode, as native EventSource doesn't support custom headers. :::
Custom event handlers for named server events.
events: {
eventName: function(e) {
console.log('Custom event:', e.data);
}
}Event Handler Parameters:
event(object): The message event object (same structure asonMessage)
Starts the SSE connection. Can be called after creating the instance or after calling stop().
var sse = $.SSE('sse-server.php', {
onMessage: function(e) {
console.log(e.data);
}
});
sse.start();Returns: boolean
true: Connection started successfullyfalse: Connection is already running
Behavior:
- Checks if an instance already exists
- Determines whether to use native EventSource or Ajax fallback based on:
- Browser support for EventSource
forceAjaxoption- Presence of custom headers
- Initializes the appropriate connection method
Stops the SSE connection and cleans up resources.
sse.stop();Returns: boolean
true: Connection stopped successfullyfalse: No active connection to stop
Behavior:
- Checks if an instance exists
- Closes the connection (EventSource) or stops Ajax polling
- Calls the
onEndcallback - Cleans up instance and type properties
The underlying connection object:
- For native EventSource: The EventSource instance
- For Ajax fallback: An object containing polling state
console.log(sse.instance);The connection type being used:
'event': Using native EventSource'ajax': Using Ajax fallbacknull: No active connection
console.log(sse.type); // 'event' or 'ajax'data: message content
event: customEventName
data: message content
id: unique-message-id
data: message content
retry: 3000
data: message content
data: line 1
data: line 2
data: line 3
id: 123
event: notification
retry: 5000
data: {"user": "john", "message": "Hello"}
The following properties are used internally and should not be modified:
_url: The SSE endpoint URL_remoteHost: The remote host (used for Ajax mode)_settings: The merged settings object_start: Reference to the original start method
To minify the library for production:
apt install uglifyjs
uglifyjs --compress 'drop_console,drop_debugger' --mangle -r '$,require,exports,_' -o jquery.sse.min.js jquery.sse.js