$ ember addon sockjs-chat
$ cd sockjs-chat
$ ember g component sockjs-chat
$ ember g service sockjs
$ ember g blueprint sockjs-chat
$ npm install ember-cli-htmlbars --save

The ember addon command generates the folder structure for the add-on. We'll discuss the folder structure in more detail later. The blueprint command creates a new blueprint called sockjs-chat. Blueprints are used to generate snippets of code. This is needed so that the SockJS library can be installed. If we're doing anything with templates, we'll need to add ember-cli-htmlbars.

// blueprints/sockjs-chat/index.js
/*jshint node:true*/
module.exports = {
    normalizeEntityName() {
},

    afterInstall() {
      return this.addBowerPackageToProject('sockjs-client', '~1.0.3');
    }
};

The afterInstall hook is used to add Bower packages. By default, the blueprint file will be run during the add-on installation. This guarantees that the sockjs-client library is installed via the Bower package manager.

// index.js
/* jshint node: true */
'use strict';

module.exports = {
    name: 'sockjs-chat',
      included(app) {
        this._super.included(app);
        app.import(app.bowerDirectory + '/sockjs-client/dist/sockjs.min.js');
      }
};

The JavaScript SockJS library is installed in the blueprint. However, we still need to import it to Ember. This can be done in the root folder's index.js file. This file is the entry point to the application. The included hook is used to import the Bower components to the application. Imports are added to the application in the order that they appear.

// package.json
{
    "name": "sockjs-chat",
    "version": "1.0.0",
    "description": "EmberJS Sockjs Chat Addon",
…
"repository": "https://github.com/ErikCH/sockjs-chat",
…
"author": "Erik Hanchett",
…
    "keywords": [
      "ember-addon",
      "sockjs",
      "ember websockets"
…

It's important to have your package.json file updated with at least your name, description, repository, author, and keywords. This is extremely important if you plan on open sourcing your add-on and publishing it to NPM. Without this information, your add-on will be hard to find.

// addon/services/sockjs.js
/* global SockJS */
import Ember from 'ember';
var {run} = Ember;

export default Ember.Service.extend(Ember.Evented,{
    socket: null,
    setupSockjs(url) {
      let socket = new SockJS(url);
      socket.addEventListener('message', run.bind(this, (event)=> {
        this.trigger('messageReceived', event.data);
        console.log(event.data);
      }));
      this.set('socket',socket);
    },
    sendInfo(message) {
      let socket= this.get('socket');
      if(socket != null){
        socket.send(message);
      }
    }

});

This may look familiar. This is almost the same service that we created in the last recipe. However, this time, we have a new setupSockjs method that takes url as a parameter. The url parameter is used to set the new socket listener:

      socket.addEventListener('message', run.bind(this,(event)=> {
        this.trigger('messageReceived', event.data);
        console.log(event.data);
      }));

This event is triggered when a new message is received. After a new message arrives, a new trigger called messageReceived will be called:

    sendInfo(message) {
      let socket= this.get('socket');
      if(socket != null){
        socket.send(message);
      }

As long as socket isn't null, message will be sent to the WebSocket server.

// addon/components/sockjs-chat.js
import Ember from 'ember';
import layout from '../templates/components/sockjs-chat';
const {typeOf} = Ember;
export default Ember.Component.extend({

    sockjs: Ember.inject.service('sockjs'),
    layout,
    message:'',

    init() {
      this._super(...arguments);
      this.get('sockjs').setupSockjs(this.attrs.url);
      this.get('sockjs').on('messageReceived',this,(message)=>{
        this.set('message',message);
        this._actionHandler('receiveAction',message);
      });
    },
    _actionHandler(actionName, ...args) {

      if(this.attrs && typeOf(this.attrs[actionName]) === 'function'){
        this.attrs[actionName](...args);
      } else {
        this.sendAction(actionName,...args);
      
      },

      actions: {
        enter(info,username) {
          this._actionHandler('sendAction',info,username);

        }
      }

});

The purpose of the component is to make it easy for someone to add a chat feature to their application without having to understand the internals of the service that we created earlier. To use this component, the template must be in block or non-block form with these properties:

{{sockjs-chat
url='http://localhost:7000'
receiveAction=(action 'receiveMessage')
sendAction=(action 'sendMessage') }}

The url property is the location of the WebSocket. The receiveAction method is the parent component's action name. This will be triggered whenever a message is received. The sendAction method is the parent component's name for action that will be sending out messages.

Let's take a look at the component in more detail:

    layout,
    message:'',
    init() {
      this._super(...arguments);
      this.get('sockjs').setupSockjs(this.attrs.url);
      this.get('sockjs').on('messageReceived',this,(message)=>{
        this.set('message',message);
        this._actionHandler('receiveAction',message);
      });
    },

The layout property is the same as layout: layout. This is a part of ES6. The init hook is run when the component is initialized. Whenever you extend a built-in method, it's always a good idea to run this._super. This makes sure that the component is set up correctly. The …arguments array is a part of the new ES6 syntax. It's known as Rest parameters and represents an indefinite number of arguments in an array. We'll be using this several times in this component.

After super is run, we pass the url property to the setupSockjs method in our service. The this.attrs.url retrieves the url property that was passed to the component.

As we are using the Ember.Event mixin, we can subscribe to the service and watch for the messageReceived trigger. When messageReceived is triggered, we set the internal message, this.message property, to the message that was received. We then pass the message to a new method called _actionHandler:

    _actionHandler(actionName, ...args) {

      if(this.attrs && typeOf(this.attrs[actionName]) === 'function'){
        this.attrs[actionName](...args);
      } else {
        this.sendAction(actionName,...args);
      }
    },

The purpose of actionHandler is to take an action passed by the receiveAction or sendAction property and invoke it. However, we need to make sure that we can handle actions passed via closure actions, as described in Chapter 6, Ember Components, or just a named action. If it's a closure action such as (action 'receiveMessage'), then we simply call it using this.attrs[actionname](…args). If not, then we use sendAction, which will send the action to the parent component:

    actions: {
      enter(info,username) {
        this._actionHandler('sendAction',info,username);

      }
    }

The enter action calls the action handler and passes the info and username over. As we are using Rest parameters in _actionHandler, (…arguments), we can pass to it as many arguments as we need.

// addon/templates/components/sockjs-chat.hbs
{{#if hasBlock}}
    {{yield this}}
{{else}}

    <textarea id="chat-content" style="width:500px;height:300px" ></textarea><br/>
    {{input type='text' placeholder='User Name' value=uname}}
    {{input type='text' placeholder='Chat Message' value=mess}}
    <button {{action 'enter' mess uname}}>Send</button><br>

{{/if}}

This gives the user a couple of choices when using this add-on. They can use the component in block form, which will look similar to the service we created in the last chapter, or they can design their own. The hasBlock helper returns true if the user adds the component in block form. If the component was not added in block form, then it displays the normal chat window.

One important aspect in this template is {{yield this}}. When in block form, this will give the block access to the component itself. We'll have full access to the components, properties, and methods in the templates block. We'll take a look at this when we test the add-on.