Event Store logo

sss https://eventstore.org Menu

Developer Blog

Using JS projections from the browser

  |   Written by: Greg Young   |   Tutorials

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>
<html>
    <head>
        <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>
    </head>
    <body>

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

        <script>
            $(function () {
                $(".username").focus();

                es.projection({
                    body: function () {
                        fromStream('simplest-chat').when({
                            'ChatMessage': function (state, event) {
                                return { "chatEntry": ("> " + event.body.sender + ": " + event.body.message) };
                            }
                        });
                    },
                    onStateChange: function (stateStr) {
                        var stateObj = JSON.parse(stateStr);
                        $("<div>").text(stateObj.chatEntry).prependTo(".chat-window");
                    }
                });

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

                    es.postEvent({
                        data: {
                            sender: $('.username').val(),
                            message: $('.message-input').val()
                        },
                        stream: 'simplest-chat',
                        eventType: 'ChatMessage',
                        success: function () {
                            $('.message-input').val("");
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Subscribe to the Event Store blog

Get the latest news and tutorials when they are released

You might also like

    Data ingestion with Logstash and EventStore

      |   Written by: Riccardo Di Nuzzo   |   Tutorials

    In this post our challenge is to load a CSV file and ingest it using the Event Store HTTP API to be ingested. To be precise, we want to convert this: ```csv Europe,Italy,Clothes,Online,M,12/17/2013,278155219,1/10/2014,1165,109.28,35.84,127311.20,41753.60,85557.60 ``` To this (which is an example of an HTTP POST to the Event Store HTTP API): ```shell [ { "eventId": "fbf4b1a1-b4a3-4dfe-a01f-ec52c34e16e4", "eventType": "InboundDataReceived", "data": { "message": "Europe,Italy,Clothes,Online,M,12/17/2013,278155219,1/10/2014,1165,109.28,35.84,127311.20,41753.60,85557.60" }, "metadata": { "host": "box-1", "path": "/usr/data/sales.csv" } } ] ``` In this example...

    Read article

    Playing with Projections

      |   Written by: Chris Ward   |   Tutorials

    Projections are common concept in event sourcing that allow you to create queries of your events and streams of events. Last year I attended Michel Grootjans's "[playing with projections](https://github.com/michelgrootjans/playing_with_projections)" workshop that taught attendees how to create projections in a variety of programming languages. I decided to convert the workshop exercises to use [Event Store's internal projections](/docs/projections/index.html) engine and show how to use our projections API. The data set is player interactions with a quiz. Visit...

    Read article

    Easier Development Builds on Unix-like Operating Systems

      |   Written by: James Nugent   |   Tutorials

    A common complaint we've heard about Event Store since it was originally open sourced is that it's complex to make development builds locally - and they were slow - and thus the project was hard to contribute to. As part of our recent work on Event Store v3.1.0 (more on this in another post) we decided to rectify this. Event Store is primarily written in C#, and builds on Mono on Linux and MacOS and...

    Read article