sse.js | A flexible Server Side Events source for Javascript | HTTP library

When your script calls source.stream();, it is doing an XMLHttpRequest.send() operation, which is async by default.

So, what is happening:

1. user clicks, and post() is called
2. SSE object and its event listener is set up
3. source.stream() is called, which sends the request to the server.
4. callback() (i.e. clip()) is called
5. Server sends back a response
6. Your message event handler is called
7. textArea.value is set

Luckily the fix is simple: you only want callback() to be called when a message is received. So move callback() to be at the end of the message event handler, not at the end of post().

It will do this after every message event that is received. If you only wanted it to happen after the first event, you will need to implement some logic to keep track of how many events have been received. (And if there will only be one message event, you should be using an Ajax call, not an SSE/EventSource call.)

UPDATE: Discussion in the comments are starting to get out of scope of your original question (where the answer is, simply put, "it is async, not sync"). But I think it is worth pointing out here that you set up a new SSE object every time the user clicks the button. Each SSE object will have its own dedicated TCP/IP socket and its own listener function. This is (generally) not a good idea: instead create the SSE connection once at the start of your web app.

And, though your SSE polyfill library allows using POST, the standard SSE does not. If you only want the app to poll the server when the user presses the button, consider switching from using SSE to normal AJAX.