An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
Flutter & Python Web-Socket Ft. Socket-IO (Part 1)
Welcome back Guys, We are going to build real time chat application using Web Socket,Client application in Flutter and Server application in Python using Flask and MySQL as Database.
Hold Your Devices, We are not going to rush in this and this is going to be in parts.
What is Web Socket ?
WebSocket is a communication protocol used in client-server communication.
WebSocket is a bidirectional communication protocol that can send the data from the client to the server or from the server to the client by reusing the established connection channel. The connection is kept alive until terminated by either the client or the server.
Why we are going to Use WebSocket not Rest APIs?
As we are going to create real time application that's mean any user can send message any time if you use REST API, we need to request from server to get new message but how can we know that any user has sent message or not? By using Periodic Request from client to server? But is this is the best way?
No this is not best way that's why we are going to use WebSocket in which Both Server and Client will be connected and both of them can request to each other.
Look below for getting clear picture,difference between WebSocket and HTTP Request.
Prerequisite
- Python IDE(Recommended PyCharm)
- MySQL Server
- SocketIO Client Extension( Chrome & Firefox)
- Flutter and Dart SDK
Lets Start
- Create a new python project or new file main.py.
- Install following library using PIP
pip install Flask-MySQLpip install Flask-SocketIOpip install cryptography
- import all the required packages
from flask import Flask, session, jsonifyfrom flask_socketio import SocketIO, join_room, leave_room, emitfrom flaskext.mysql import MySQLimport datetime
- Create a simple Socket IO Flask
# Flask App Configapp: Flask = Flask(__name__)app.config['SECRET_KEY'] = 'secret'app.config['SESSION_TYPE'] = 'filesystem'# CORS_ALLOWED_ORIGINS is the list of origins authorized to make requests.socketio = SocketIO(app, cors_allowed_origins='*')# Home [email protected]('/', methods=['GET', 'POST'])def index(): return jsonify({'data': "Web Socket Example"})if __name__ == '__main__': # Run Flask-SocketIO App socketio.run(app, debug=True)
Before going forward lets understand what is socket.emit(),socket.on() and Room in Socket IO?
- Room : as Name suggested Room is place(channel) in server where different clients can join and leave and also from there message can be broadcast to all the clients in same room.
Note: Only those client will be receiving who are in same room not from different room.
- Socket.emit() Event : Emits an event to the socket identified by the string name. Any other parameters can be included. All serializable data structures are supported, including Buffer.
- Socket.on() Event : Socket.on() is an event handler that take information from client and process.
Server
io.on("connection", (socket) => { socket.emit("hello", "world", (response) => { console.log(response); // "got it" });});
Client
socket.on("hello", (arg, callback) => { console.log(arg); // "world" callback("got it");});
- We are going to following logic for designing backed and frontend.
Note: Database will be introduce in upcoming parts so for being now we are not going to persistent message.
- Add following lines of codes below def index() function.
@socketio.on('join', namespace='/chat')def join(message): # we need roomId and Username for joining the room room = message['roomId'] username = message['username'] # join room join_room(room) # Emit message or notifier to other user of same room emit('message', {"msg": {str(username) + 'has joined the room.'}}, room=room)@socketio.on('text', namespace='/chat')def text(message): room = message['room'] username = message['username'] msg = message['msg'] emit('message', {"msg": {str(username) + ' : ' + str(msg)}}, room=room)@socketio.on('left', namespace='/chat')def left(message): room = message['room'] username = message['username'] # leaving the room leave_room(room=room) emit('message', {"msg": {str(username) + 'has left the room.'}}, room=room)
Now run the app and open Socket IO Client.
Note URL for connecting socket IO will be(localhost)
"http://localhost:5000/chat"
where chat is namespace.Lets test, join first and sent following data:
{"roomId":"test1223","username":"smk"}
- Now sent message in same room with following JSON data:
{"room":"test1223","username":"smk","msg":"hello"}
Note: Do not forgot to change on event name 'join' to 'text'.
- Lets try to leave the room by sending request to server and following data:
{"room":"test1223","username":"smk",}
Hurray we are done........
In Next part we are going to setup MySQL Database to web socket server and persist the message.
Stay Tuned....
Follow me:
Original Link: https://dev.to/djsmk123/flutter-python-web-socket-ft-socket-io-part-1-3icf
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To