SlideShare a Scribd company logo
1 of 34
Creating Web Chat
With Flask-SocketIO
Linggar Primahastoko
x@linggar.asia
Flask?
Flask is a microframework for Python based
on Werkzeug, Jinja 2 and good intentions.
http://flask.pocoo.org/
SocketIO
Socket.IO enables real-time bidirectional event-
based communication.
It works on every platform, browser or device,
focusing equally on reliability and speed.
https://socket.io/
Why SocketIO?

Bidirectional Communication

Async

Real Time

Fast
What can we do with SocketIO

Real Time Analytics

Binary Streaming (Since Socket.io v1.0)

Instant Messaging

Document Collaboration
Flask-SocketIO
Flask-SocketIO gives Flask applications access
to low latency bi-directional communications
between the clients and the server. The client-
side application can use any of the SocketIO
official clients libraries in Javascript, C++, Java
and Swift, or any compatible client to establish
a permanent connection to the server.
https://flask-socketio.readthedocs.io
Why Flask-SocketIO

Simple Implementation

Rich of Features

Fast to be developed
Requirements
Server Side

Python 2.7 or Python 3.3+

Async packages
− Eventlet
− Gevent
− Flask Development Server
Client Side

Official Socket.IO Javascript client library
Getting Started
Server Init
from flask import Flask, render_template
from flask_socketio import SocketIO
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
if __name__ == '__main__':
socketio.run(app)
Client init
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.
3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect('http://' +
document.domain + ':' + location.port);
socket.on('connect', function() {
socket.emit('my event', {data: 'I'm
connected!'});
});
On Connect
https://github.com/miguelgrinberg/Flask-SocketIO/blob/master/example/app.py
Background task
https://github.com/miguelgrinberg/Flask-SocketIO/blob/master/example/app.py
Sending Message

Send
− implemented for compatibility with vanilla
WebSocket interface
− Only send string

Emit
− feature of Socket.IO
− Can send object
https://flask-socketio.readthedocs.io/en/latest/
Namespace
Socket.IO allows you to “namespace” your
sockets, which essentially means assigning
different endpoints or paths.
This is a useful feature to minimize the number of
resources (TCP connections) and at the same
time separate concerns within your application
by introducing separation between
communication channels.
https://socket.io/docs/rooms-and-namespaces
Receiving message
index.html
index.html
app.py
Broadcast
Send “A”
Send “A”
Send “A”
Client A Client B Client C
Server
Session
Every connected client has session id
from flask import request
session_id = request.sid
Room
Flask-SocketIO Built-in Function:

rooms

join_room

leave_room

close_room
Room
Room A Room B
Server
Client
Client
Client ClientClient
Client Client
Client
Client
Client
# Join Room
join_room(room_name)
# Send message to room
emit('room_response', {'message':
'test'}, room=room_name)
Private Message
Client Client Client
Server
Send 'A'
Send 'A'
# Send private message
emit('my_response', {'message': 'message'},
room=friend_session_id)
What's next?
Flask-IRC

Server Side

Flask

Flask-SocketIO

Client Side

SocketIO Javascript Client Library

jQuery
https://github.com/linxlunx/flask-irc
Thank You!

More Related Content

What's hot

Penetration Testing Report
Penetration Testing ReportPenetration Testing Report
Penetration Testing ReportAman Srivastava
 
Understanding Cross-site Request Forgery
Understanding Cross-site Request ForgeryUnderstanding Cross-site Request Forgery
Understanding Cross-site Request ForgeryDaniel Miessler
 
Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation Ikhade Maro Igbape
 
The EternalBlue Exploit: how it works and affects systems
The EternalBlue Exploit: how it works and affects systemsThe EternalBlue Exploit: how it works and affects systems
The EternalBlue Exploit: how it works and affects systemsAndrea Bissoli
 
Ch 10: Hacking Web Servers
Ch 10: Hacking Web ServersCh 10: Hacking Web Servers
Ch 10: Hacking Web ServersSam Bowne
 
Session1-Introduce Http-HTTP Security headers
Session1-Introduce Http-HTTP Security headers Session1-Introduce Http-HTTP Security headers
Session1-Introduce Http-HTTP Security headers zakieh alizadeh
 
Socket programming in Java (PPTX)
Socket programming in Java (PPTX)Socket programming in Java (PPTX)
Socket programming in Java (PPTX)UC San Diego
 
Cehv6 module 01 introduction to ethical hacking
Cehv6 module 01 introduction to ethical hackingCehv6 module 01 introduction to ethical hacking
Cehv6 module 01 introduction to ethical hackinganonymousrider
 
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)Sam Bowne
 

What's hot (20)

Penetration Testing Report
Penetration Testing ReportPenetration Testing Report
Penetration Testing Report
 
Understanding Cross-site Request Forgery
Understanding Cross-site Request ForgeryUnderstanding Cross-site Request Forgery
Understanding Cross-site Request Forgery
 
Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation
 
The Security Code Review Guide
The Security Code Review GuideThe Security Code Review Guide
The Security Code Review Guide
 
osi vs tcp/ip
osi vs tcp/iposi vs tcp/ip
osi vs tcp/ip
 
The EternalBlue Exploit: how it works and affects systems
The EternalBlue Exploit: how it works and affects systemsThe EternalBlue Exploit: how it works and affects systems
The EternalBlue Exploit: how it works and affects systems
 
Ch 10: Hacking Web Servers
Ch 10: Hacking Web ServersCh 10: Hacking Web Servers
Ch 10: Hacking Web Servers
 
Security Design Concepts
Security Design ConceptsSecurity Design Concepts
Security Design Concepts
 
Stm unit1
Stm unit1Stm unit1
Stm unit1
 
Presentation On Com Dcom
Presentation On Com DcomPresentation On Com Dcom
Presentation On Com Dcom
 
Socket Programming
Socket ProgrammingSocket Programming
Socket Programming
 
Session1-Introduce Http-HTTP Security headers
Session1-Introduce Http-HTTP Security headers Session1-Introduce Http-HTTP Security headers
Session1-Introduce Http-HTTP Security headers
 
Dns resource record
Dns resource recordDns resource record
Dns resource record
 
Email security
Email securityEmail security
Email security
 
Anonymizers
AnonymizersAnonymizers
Anonymizers
 
Socket programming in Java (PPTX)
Socket programming in Java (PPTX)Socket programming in Java (PPTX)
Socket programming in Java (PPTX)
 
Cehv6 module 01 introduction to ethical hacking
Cehv6 module 01 introduction to ethical hackingCehv6 module 01 introduction to ethical hacking
Cehv6 module 01 introduction to ethical hacking
 
OsI reference model
OsI reference modelOsI reference model
OsI reference model
 
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)
CNIT 129S: 9: Attacking Data Stores (Part 2 of 2)
 
Cross site scripting XSS
Cross site scripting XSSCross site scripting XSS
Cross site scripting XSS
 

Similar to Webchat using flask socket io

WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersViktor Gamov
 
Building event-driven (Micro)Services with Apache Kafka Ecosystem
Building event-driven (Micro)Services with Apache Kafka EcosystemBuilding event-driven (Micro)Services with Apache Kafka Ecosystem
Building event-driven (Micro)Services with Apache Kafka EcosystemGuido Schmutz
 
Functional legacy - how to incorporate ZIO in your legacy services
Functional legacy - how to incorporate ZIO in your legacy servicesFunctional legacy - how to incorporate ZIO in your legacy services
Functional legacy - how to incorporate ZIO in your legacy servicesNatan Silnitsky
 
KohaCon11: Integrating Koha with RFID system
KohaCon11: Integrating Koha with RFID systemKohaCon11: Integrating Koha with RFID system
KohaCon11: Integrating Koha with RFID systemDobrica Pavlinušić
 
2600hz WebRTC Meetup at WeWork, San Francisco, CA
2600hz WebRTC Meetup at WeWork, San Francisco, CA2600hz WebRTC Meetup at WeWork, San Francisco, CA
2600hz WebRTC Meetup at WeWork, San Francisco, CA2600Hz
 
Real time web applications with signal r
Real time web applications with signal rReal time web applications with signal r
Real time web applications with signal rElad Avneri
 
Building Video Apps on Salesforce Platform
Building Video Apps on Salesforce PlatformBuilding Video Apps on Salesforce Platform
Building Video Apps on Salesforce PlatformFrancesco Iervolino
 
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...South Tyrol Free Software Conference
 
Gatein Presentation
Gatein PresentationGatein Presentation
Gatein PresentationMinh Hoang
 
SignalR Intro + WPDev integration @ Codetock
SignalR Intro + WPDev integration @ CodetockSignalR Intro + WPDev integration @ Codetock
SignalR Intro + WPDev integration @ CodetockSam Basu
 
Codeless pipelines with pulsar and flink
Codeless pipelines with pulsar and flinkCodeless pipelines with pulsar and flink
Codeless pipelines with pulsar and flinkTimothy Spann
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introductiondynamis
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyonddynamis
 
Abusing Exploiting and Pwning with Firefox Addons
Abusing Exploiting and Pwning with Firefox AddonsAbusing Exploiting and Pwning with Firefox Addons
Abusing Exploiting and Pwning with Firefox AddonsAjin Abraham
 
Embedding Messages and Video Calls in your apps
Embedding Messages and Video Calls in your appsEmbedding Messages and Video Calls in your apps
Embedding Messages and Video Calls in your appsCisco DevNet
 
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...Codemotion
 

Similar to Webchat using flask socket io (20)

Socketio
SocketioSocketio
Socketio
 
Webrtc in Real world
Webrtc in Real world Webrtc in Real world
Webrtc in Real world
 
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
 
Building event-driven (Micro)Services with Apache Kafka Ecosystem
Building event-driven (Micro)Services with Apache Kafka EcosystemBuilding event-driven (Micro)Services with Apache Kafka Ecosystem
Building event-driven (Micro)Services with Apache Kafka Ecosystem
 
Functional legacy - how to incorporate ZIO in your legacy services
Functional legacy - how to incorporate ZIO in your legacy servicesFunctional legacy - how to incorporate ZIO in your legacy services
Functional legacy - how to incorporate ZIO in your legacy services
 
KohaCon11: Integrating Koha with RFID system
KohaCon11: Integrating Koha with RFID systemKohaCon11: Integrating Koha with RFID system
KohaCon11: Integrating Koha with RFID system
 
2600hz WebRTC Meetup at WeWork, San Francisco, CA
2600hz WebRTC Meetup at WeWork, San Francisco, CA2600hz WebRTC Meetup at WeWork, San Francisco, CA
2600hz WebRTC Meetup at WeWork, San Francisco, CA
 
Web Sockets
Web SocketsWeb Sockets
Web Sockets
 
Real time web applications with signal r
Real time web applications with signal rReal time web applications with signal r
Real time web applications with signal r
 
Real time web apps
Real time web appsReal time web apps
Real time web apps
 
Building Video Apps on Salesforce Platform
Building Video Apps on Salesforce PlatformBuilding Video Apps on Salesforce Platform
Building Video Apps on Salesforce Platform
 
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...
SFScon22 - Sara Tumiati - Goffice 2.0 - Open-Source Microservices for the Sou...
 
Gatein Presentation
Gatein PresentationGatein Presentation
Gatein Presentation
 
SignalR Intro + WPDev integration @ Codetock
SignalR Intro + WPDev integration @ CodetockSignalR Intro + WPDev integration @ Codetock
SignalR Intro + WPDev integration @ Codetock
 
Codeless pipelines with pulsar and flink
Codeless pipelines with pulsar and flinkCodeless pipelines with pulsar and flink
Codeless pipelines with pulsar and flink
 
HTML5 Introduction
HTML5 IntroductionHTML5 Introduction
HTML5 Introduction
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
Abusing Exploiting and Pwning with Firefox Addons
Abusing Exploiting and Pwning with Firefox AddonsAbusing Exploiting and Pwning with Firefox Addons
Abusing Exploiting and Pwning with Firefox Addons
 
Embedding Messages and Video Calls in your apps
Embedding Messages and Video Calls in your appsEmbedding Messages and Video Calls in your apps
Embedding Messages and Video Calls in your apps
 
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
 

Recently uploaded

The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyDamar Juniarto
 
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideBug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideVarun Mithran
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkklolsDocherty
 
Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsrahman018755
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfappinfoedgeca
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxChloeMeadows1
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfOndejSur
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?Linksys Velop Login
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebJie Liau
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appscristianmanaila2
 
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresenceCyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresencePC Doctors NET
 
Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsrahman018755
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsrahman018755
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirtrahman018755
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.Tortogel
 

Recently uploaded (17)

The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
Bug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's GuideBug Bounty Blueprint : A Beginner's Guide
Bug Bounty Blueprint : A Beginner's Guide
 
Pvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdfPvtaan Social media marketing proposal.pdf
Pvtaan Social media marketing proposal.pdf
 
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkkaudience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk
 
Free scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirtsFree scottie t shirts Free scottie t shirts
Free scottie t shirts Free scottie t shirts
 
Premier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdfPremier Mobile App Development Agency in USA.pdf
Premier Mobile App Development Agency in USA.pdf
 
Production 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptxProduction 2024 sunderland culture final - Copy.pptx
Production 2024 sunderland culture final - Copy.pptx
 
Statistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdfStatistical Analysis of DNS Latencies.pdf
Statistical Analysis of DNS Latencies.pdf
 
How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?How Do I Begin the Linksys Velop Setup Process?
How Do I Begin the Linksys Velop Setup Process?
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
Development Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of appsDevelopment Lifecycle.pptx for the secure development of apps
Development Lifecycle.pptx for the secure development of apps
 
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital PresenceCyber Security Services Unveiled: Strategies to Secure Your Digital Presence
Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence
 
Reggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirtsReggie miller choke t shirts
Reggie miller choke t shirtsReggie miller choke t shirts
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
GOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdfGOOGLE Io 2024 At takes center stage.pdf
GOOGLE Io 2024 At takes center stage.pdf
 
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.
 

Webchat using flask socket io