Event Store blog


Using JS projections from the browser

Greg Young  |  26 September 2012

One of the main use cases we had for using Javascript as our query language was that 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 () {