Event Store logo

sss https://eventstore.org Menu

Developer Blog

Using JS projections from the browser

One of the main use cases we had for using Javascript as our query language was the the same code could be hosted in a browser. You can see a more in depth example of this in the “Event store chat example” that is reachable from the main screen in the management console.

Sometimes code speaks 1000 words.

<!doctype html>
        <title>Simple Chat</title>
        <script src="lib/jquery/jquery-1.8.0.min.js"></script>
        <script src="js/projections/v8/Prelude/Modules.js"> </script>
        <script src="js/projections/v8/Prelude/Projections.js"> </script>
        <script src="js/projections/es.projections.environment.js"> </script>
        <script src="js/projections/v8/Prelude/1Prelude.js"> </script>
        <script src="js/projections/es.projection.js"> </script>
        <script src="js/projections/es.api.js"> </script>

        <input type="text" class="username" value="Input Your Name Here"/>
        <input type="text" class="message-input" value="Your Message"/>
        <div class="chat-window"></div>

            $(function () {

                    body: function () {
                            'ChatMessage': function (state, event) {
                                return { "chatEntry": ("> " + event.body.sender + ": " + event.body.message) };
                    onStateChange: function (stateStr) {
                        var stateObj = JSON.parse(stateStr);

                $(".message-input").keypress(function (e) {
                    if (e.which !== 13) return;

                        data: {
                            sender: $('.username').val(),
                            message: $('.message-input').val()
                        stream: 'simplest-chat',
                        eventType: 'ChatMessage',
                        success: function () {