server sent events (eventsource) with standard asp.net mvc causing error

Question

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.

Answer 1

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);
        }
    }
}