I am trying my hand at server-sent events, but I cannot get it to work within an MVC project (not WebAPI). I haven't found any good samples online.
This is the server-side code I tried (including several failed attempts from various posts):
Function GetRows() as ActionResult
Dim ret = New HttpResponseMessage
' ret.Content.w
' Return ret
Response.ContentType = "text/event-stream"
Response.Write("data: " & "aaaa")
Dim flag = False
If flag Then
For i = 0 To 100
Response.Write("data: " & i)
Next
End If
Response.Flush()
'Return Content("Abv")
'Return Content(("data: {0}\n\n" & DateTime.Now.ToString(), "text/event-stream")
End Function
and here is the Javascript
var source = new EventSource("/Tool/GetRows");
source.onmessage = function (event) {
document.getElementById("messages").innerHTML += event.data + "<br>";
};
source.onerror = function (e) {
console.log(e);
};
For some reason it's always going into onerror
, and there is no information there what type of error it might be.
What am I doing wrong?
BTW, I don't think this action should really return anything, since my understanding is it should only be writing to the stream string by string.
EventSource expects a specific format, and will raise onerror
if the stream doesn't match that format -- a set of lines of field/value pairs separated by a :
, with each line ending in a newline character:
field: value
field: value
field
can be one of data
,event
,id
,retry
, or empty for a comment (will be ignored by EventSource).
data
can span multiple lines, but each of those lines must start with data:
Each event trigger has to end with a double newline
data: 1
data: second line of message
data: 2
data: second line of second message
Note: If you are writing in VB.NET, you can't use the \n
escape sequence to write newlines; you have to use vbLf
or Chr(10)
.
As an aside, EventSource is supposed to hold an open connection to the server. From MDN (emphasis mine):
The EventSource interface is used to receive server-sent events. It connects to a server over HTTP and receives events in text/event-stream format without closing the connection.
Once control exits from an MVC controller method, the result will be packaged up and sent to the client, and the connection will be closed. Part of EventSource is that the client will try reopening the connection, which will once again be immediately closed by the server; the resulting close -> reopen cycle can also be seen here.
Instead of exiting from the method, the method should have some sort of loop that will be continuously writing to the Response
stream.
Example in VB.NET
Imports System.Threading
Public Class HomeController
Inherits Controller
Sub Message()
Response.ContentType= "text/event-stream"
Dim i As Integer
Do
i += 1
Response.Write("data: DateTime = " & Now & vbLf)
Response.Write("data: Iteration = " & i & vbLf)
Response.Write(vbLf)
Response.Flush
'The timing of data sent to the client is determined by the Sleep interval (and latency)
Thread.Sleep(1000)
Loop
End Sub
End Class
Example in C#
Client-side:
<input type="text" id="userid" placeholder="UserID" /><br />
<input type="button" id="ping" value="Ping" />
<script>
var es = new EventSource('/home/message');
es.onmessage = function (e) {
console.log(e.data);
};
es.onerror = function () {
console.log(arguments);
};
$(function () {
$('#ping').on('click', function () {
$.post('/home/ping', {
UserID: $('#userid').val() || 0
});
});
});
</script>
Server-side:
using System;
using System.Collections.Concurrent;
using System.Threading;
using System.Web.Mvc;
using Newtonsoft.Json;
namespace EventSourceTest2.Controllers {
public class PingData {
public int UserID { get; set; }
public DateTime Date { get; set; } = DateTime.Now;
}
public class HomeController : Controller {
public ActionResult Index() {
return View();
}
static ConcurrentQueue<PingData> pings = new ConcurrentQueue<PingData>();
public void Ping(int userID) {
pings.Enqueue(new PingData { UserID = userID });
}
public void Message() {
Response.ContentType = "text/event-stream";
do {
PingData nextPing;
if (pings.TryDequeue(out nextPing)) {
Response.Write("data:" + JsonConvert.SerializeObject(nextPing, Formatting.None) + "\n\n");
}
Response.Flush();
Thread.Sleep(1000);
} while (true);
}
}
}