How to build a realtime, WebSockets-enabled chat in less than 5 minutes
-
Upload
derek-edwards -
Category
Engineering
-
view
72 -
download
1
Transcript of How to build a realtime, WebSockets-enabled chat in less than 5 minutes
![Page 1: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/1.jpg)
Build a Real-time, WebSockets-enabled Chat in less than 5 minutes
with Ember-CLI and Python
Derek Edwards August 4, 2015
![Page 2: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/2.jpg)
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
![Page 3: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/3.jpg)
Prerequisites
• python / pip / virtualenv installed
• Ember-CLI + dependencies installed
• See http://www.ember-cli.com/
![Page 4: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/4.jpg)
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!
![Page 5: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/5.jpg)
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
![Page 6: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/6.jpg)
Setup Ember environment
Add a contentSecurityPolicy
so we can talk to WebSockets
![Page 7: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/7.jpg)
Create a websocket initializer
Injects a ‘websockets’ object into all controllers
![Page 8: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/8.jpg)
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
![Page 9: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/9.jpg)
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
![Page 10: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/10.jpg)
Let’s see what we have so far
ember server
Ugly but does the job.
Browser is trying to connect to WebSocket
endpoint
![Page 11: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/11.jpg)
Setup python environment
virtualenv env
source env/bin/activate
pip install tornado
![Page 12: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/12.jpg)
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
![Page 13: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/13.jpg)
Start the serverpython server.py
![Page 14: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/14.jpg)
Some raw data
![Page 15: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/15.jpg)
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
![Page 16: How to build a realtime, WebSockets-enabled chat in less than 5 minutes](https://reader034.fdocuments.in/reader034/viewer/2022042701/55ce1b09bb61eb40578b4612/html5/thumbnails/16.jpg)
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