Adding ServerSentEvents
This commit is contained in:
parent
181053e876
commit
466c8d9db9
|
|
@ -8,7 +8,8 @@
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
let connectButton = document.getElementById('connect');
|
let connectButton = document.getElementById('connect');
|
||||||
let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
|
let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
|
||||||
connection.on('Send',(msg) => { addLine(msg); });
|
connection.on('Send', msg => {
|
||||||
|
addLine(msg); });
|
||||||
let isConnected = false;
|
let isConnected = false;
|
||||||
|
|
||||||
connectButton.addEventListener('click', () => {
|
connectButton.addEventListener('click', () => {
|
||||||
|
|
|
||||||
|
|
@ -9,13 +9,13 @@ class LongPollingTransport implements ITransport {
|
||||||
// TODO: string won't work for binary formats
|
// TODO: string won't work for binary formats
|
||||||
constructor(receiveCallback: (data: string) => void) {
|
constructor(receiveCallback: (data: string) => void) {
|
||||||
this.receiveCallback = receiveCallback;
|
this.receiveCallback = receiveCallback;
|
||||||
this.pollXhr = new XMLHttpRequest();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
connect(url: string, queryString: string): Promise<void> {
|
connect(url: string, queryString: string): Promise<void> {
|
||||||
this.queryString = queryString || "";
|
this.queryString = queryString || "";
|
||||||
this.url = url || "";
|
this.url = url || "";
|
||||||
|
|
||||||
|
this.pollXhr = new XMLHttpRequest();
|
||||||
// TODO: resolve promise on open sending? + reject on error
|
// TODO: resolve promise on open sending? + reject on error
|
||||||
this.poll(url + "/poll?" + this.queryString)
|
this.poll(url + "/poll?" + this.queryString)
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
|
|
|
||||||
|
|
@ -51,17 +51,19 @@ class RpcConnection {
|
||||||
start(): Promise<void> {
|
start(): Promise<void> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
new HttpClient().get(this.url + "/getid?" + this.queryString)
|
new HttpClient().get(this.url + "/getid?" + this.queryString)
|
||||||
.then(id => {
|
.then(id => {
|
||||||
// this.transport = new WebSocketTransport(data => this.messageReceived(data));
|
this.transport = new ServerSentEventsTransport(data => this.messageReceived(data));
|
||||||
this.transport = new LongPollingTransport(data => this.messageReceived(data));
|
// this.transport = new WebSocketTransport(data => this.messageReceived(data));
|
||||||
return this.transport.connect(this.url, `id=${id}&${this.queryString}`);
|
// this.transport = new WebSocketTransport(data => this.messageReceived(data));
|
||||||
})
|
// this.transport = new LongPollingTransport(data => this.messageReceived(data));
|
||||||
.then(() => {
|
return this.transport.connect(this.url, `id=${id}&${this.queryString}`);
|
||||||
resolve();
|
})
|
||||||
})
|
.then(() => {
|
||||||
.catch(() => {
|
resolve();
|
||||||
reject();
|
})
|
||||||
});
|
.catch(e => {
|
||||||
|
reject(e);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
// TODO: need EvenSource typings
|
||||||
|
|
||||||
|
class ServerSentEventsTransport implements ITransport {
|
||||||
|
private receiveCallback: (data: string) => void;
|
||||||
|
private eventSource: EventSource;
|
||||||
|
private url: string;
|
||||||
|
private queryString: string;
|
||||||
|
|
||||||
|
constructor(receiveCallback: (data: string) => void) {
|
||||||
|
this.receiveCallback = receiveCallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
connect(url: string, queryString: string): Promise<void> {
|
||||||
|
this.queryString = queryString || "";
|
||||||
|
this.url = url || "";
|
||||||
|
let tmp = `${this.url}/sse?${this.queryString}`;
|
||||||
|
this.eventSource = new EventSource(`${this.url}/sse?${this.queryString}`);
|
||||||
|
this.eventSource.onmessage = e => {
|
||||||
|
this.receiveCallback(e.data);
|
||||||
|
};
|
||||||
|
|
||||||
|
//TODO: handle errors
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
send(data: string): Promise<void> {
|
||||||
|
return new HttpClient().post(this.url + "/send?" + this.queryString, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
stop(): void {
|
||||||
|
this.eventSource.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -47,6 +47,10 @@ namespace Microsoft.AspNetCore.Sockets
|
||||||
state.Connection.Metadata["transport"] = "sse";
|
state.Connection.Metadata["transport"] = "sse";
|
||||||
state.Connection.Metadata.Format = format;
|
state.Connection.Metadata.Format = format;
|
||||||
|
|
||||||
|
// TODO: this is wrong. + how does the user add their own metadata based on HttpContext
|
||||||
|
var formatType = (string)context.Request.Query["formatType"];
|
||||||
|
state.Connection.Metadata["formatType"] = string.IsNullOrEmpty(formatType) ? "json" : formatType;
|
||||||
|
|
||||||
var sse = new ServerSentEvents(state.Connection);
|
var sse = new ServerSentEvents(state.Connection);
|
||||||
|
|
||||||
await DoPersistentConnection(endpoint, sse, context, state.Connection);
|
await DoPersistentConnection(endpoint, sse, context, state.Connection);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue