Build a Real-time, WebSockets-enabled Chat in less than 5 minutes

with Ember-CLI and Python

Derek Edwards August 4, 2015

About me

@derekbedwards github.com/derekbedwardslinkedin.com/in/derekbedwards

Lean Startup, Ember.JS & Python evangelist

Co-founder / CTO of CoachLogix Former co-founder Acclaimd, Hungerly

Prerequisites

• python / pip / virtualenv installed

• Ember-CLI + dependencies installed

• See http://www.ember-cli.com/

Overview• Start a base Ember-CLI project as a chat client

• Install ember-websockets module

• Create a basic application controller and template

• Start a base Python Tornado project as a chat server

• Create a Python virtualenv and install Tornado

• Create a basic Python websocket server

• Run the Python websocket server and Ember CLI client

• Magic!

Create Ember project

mkdir chatdemo

cd chatdemo

ember init

ember install ember-websockets

ember g initializer websocket

ember g route application

ember g controller application

Setup Ember environment

Add a contentSecurityPolicy

so we can talk to WebSockets

Create a websocket initializer

Injects a ‘websockets’ object into all controllers

Setup main controller

Initializes websocket, sets up handlers

Catches open event on the websocket

Push received messages into the

messages array

Constructs and sends message to web socket when user

presses send

Setup main template

Collect a name from the user

Display all received messages (or none)

Provide an entry field for new messages

Display a Send button tied to the

sendMessage action

Let’s see what we have so far

ember server

Ugly but does the job.

Browser is trying to connect to WebSocket

endpoint

Setup python environment

virtualenv env

source env/bin/activate

pip install tornado

Create a simple server.pyExtend from Tornado WebSocketHandler

When a new client connects, add them to

a list of clients

When a message is received, broadcast to all registered clients

When a client disconnects, remove

them from the list

Start the serverpython server.py

Some raw data

Limitations / Improvements• No authentication / user models

• Implement JWT or similar mechanism

• No chat history / archive

• Need some kind of persistent data store for message backlog to be more ‘Slack-like’

• Fragile message distribution / queue

• Implement redis or better yet Amazon Simple Queue Service

That’s all!

Thanks to Heather Brysiewicz + Erik Hanchett

Code from this talk:github.com/derekbedwards/ember-python-chat

— @derekbedwards

github.com/derekbedwards linkedin.com/in/derekbedwards