Skip to content

Instantly share code, notes, and snippets.

@1UC1F3R616

1UC1F3R616/SOCKET-IO.md

Last active June 24, 2020 05:16
Show Gist options
  • Save 1UC1F3R616/78d5348b0d32586023f53c7b904d6a05 to your computer and use it in GitHub Desktop.
Save 1UC1F3R616/78d5348b0d32586023f53c7b904d6a05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SOCKET-IO.md

To stop CORS

socketio = SocketIO(app, cors_allowed_origins='*')

sending json from client to server on a particular namespace

@socketio.on('attendence_request', namespace='/attendence_namespace')
def take_attendence_from_user(json):
    print('\n\n\n\n\nUSER MESSAGE: {}'.format(str(json)))
<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

	var socket = io.connect('http://127.0.0.1:5000');
	var socket_attendence = io('http://127.0.0.1:5000/attendence_namespace')

	$('#sendbutton').on('click', function() {
		socket_attendence.emit('attendence_request', {'otp':$('#myMessage').val(), 'token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTE2Mzc2NDksImlhdCI6MTU4MDEwMTY0NCwic3ViIjoxfQ.QkM-DsJR0yuVbSL-ElkQeHG0xYPpF_BrA-lJhi8MZqk'});
		$('#myMessage').val('');
	});
  
  </script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>

Emiting JSON to Client on a particular namespace

from flask_socketio import SocketIO, send, emit
import json
@socketio.on('attendence_request', namespace='/attendence_namespace')
def take_attendence_from_user(json_):
    print('\n\n\n\n\nUSER MESSAGE: {}\n\n'.format(str(json_))) #dict type here
    emit('from flask', json.dumps(json_)) #json is emited now
	socket_attendence.on('from flask', function(json) {
		$("#messages").append('<li>'+json+'</li>');
		console.log('Received message');
	});

If you open more than 1 clients, they recive only their emit not others!**

broadcast=True | Now all will recive**

controlling emit from server to client whether private or broadcast: (here you can implement your function at False place)

      if False:
        emit('from flask', json.dumps(json_))
    else:
        emit('from flask', json.dumps(json_), broadcast=True) #json is emited now
        ----------------------------------------------

Lisiting on General namespace when we have more than 1 namespace also present

import json
@socketio.on('attendence_request', namespace='/')#attendence_namespace')
def take_attendence_from_user(json_):
    print('\n\n\n\n\nUSER MESSAGE: {}\n\n'.format(str(json_))) #dict type here
    if False:
        emit('from flask', json.dumps(json_))
    else:
        emit('from flask', json.dumps(json_), broadcast=True) #json is emited now
  var socket = io.connect('http://127.0.0.1:5000');
  	$('#sendbutton').on('click', function() {
		socket.emit('attendence_request', {'otp':$('#myMessage').val(), 'token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTE2Mzc2NDksImlhdCI6MTU4MDEwMTY0NCwic3ViIjoxfQ.QkM-DsJR0yuVbSL-ElkQeHG0xYPpF_BrA-lJhi8MZqk'});
		$('#myMessage').val('');
	});
	socket.on('from flask', function(json) {
        $("#messages").append('<li>'+json+'</li>');
		console.log('Received message on / namespace');

Yes, You can have more than 1 return in a single socketio

example:

from flask import Flask
from flask_socketio import SocketIO, send, emit, join_room, leave_room
import json

app = Flask(__name__)
app.config['SECRET_KEY']='secretkey'
app.config['DEBUG']=True
socketio = SocketIO(app, cors_allowed_origins='*')

ROOMS = ["Lounge", "news", "games", "coding", "food", "cars"]

@socketio.on('join')
def on_join(data):
    print('\n\n\n\n1\n\n')
    username = data["username"]
    room = data["room"]
    join_room(room)
    mymessage = 'user {} has joined room {}'.format(username, room)
    emit('room_join', mymessage, room=room)
    emit('room_join', 'falana', room=room)
    print('\n\nexce\n\n')



@socketio.on('leave')
def on_leave(data):
    print('\n\n\n\n2\n\n')
    username = data["username"]
    room = data["room"]
    leave_room(room)
    mymessage = 'user {} has joined room {}'.format(username, room)
    emit('room_leave', mymessage, room=room)

@socketio.on('new_room')
def new_room(data):
    print('\n\n\n\n3\n\n')
    ROOMS.append(data['new_room_name'])
    room = data['new_room_name']
    username = data['username']
    join_room(data['new_room_name'])
    mymessage = 'user {} has joined room {}'.format(username, room)
    emit('new_room', mymessage, room=room)



if __name__ == '__main__':
    socketio.run(app)
<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

	var socket = io.connect('http://127.0.0.1:5000');
	var socket_attendence = io('http://127.0.0.1:5000/attendence_namespace')

    $('#joinroom').on('click', function(){
        socket.emit('join', {'username': 'kush', 'room': 'news'});
});

    $('#leaveroom').on('click', function(){
        socket.emit('leave', {'username': 'kush', 'room': 'ccc'});
});

    $('#myroom').on('click', function(){
        socket.emit('new_room', {'username': 'kush', 'new_room_name': 'ccc'});
});

    socket.on('new_room', function(msg) {
            alert(msg);
        });
    socket.on('room_join', function(msg) {
        alert(msg);
    });
    socket.on('room_leave', function(msg) {
        alert(msg);
    });




});
  </script>

<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
<button id="joinroom">JOIN</button>
<button id="leaveroom">Leave</button>
<button id="myroom">MyRoom</button>
</body>
</html>

strange behaviour: not able to emit.I checked data is getting in, reciving function is correct i tested

@socketio.on('leave')
def on_leave(data):
    print('\n\n\n\n2\n\n')
    username = data["username"]
    room = data["room"]
    mymessage = 'user {} has joined room {}'.format(username, room)
    print('\n\n\nhi {}\n\n\n'.format(mymessage))
    emit('room_join', 'falana', room=room)
    mine()
    leave_room(room)
    print('\n\n\nhi {}\n\n\n'.format(mymessage))
    emit('room_join', 'falana', room=room)
    emit('room_leave', 'kkkkk', room=room)

Working with Rooms:

  • user can join more than 1 rooms
  • once a user leaves a room, all rooms are left
  • if a user A is in room roomA and roomB then he will get all notifications from roomA and roomB but not from roomC

Server side room

from flask import Flask

from flask_socketio import SocketIO, send, emit, join_room, leave_room

import json

 

app = Flask(__name__)

app.config['SECRET_KEY']='secretkey'

app.config['DEBUG']=True

socketio = SocketIO(app, cors_allowed_origins='*')

 

ROOMS = ["Lounge", "news", "games", "coding", "food", "cars"]

 

@socketio.on('join')

def on_join(data):

    username = data["username"]

    room = data["room"]

    join_room(room)

    mymessage = 'user {} has joined room {}'.format(username, room)

    emit('room_join', mymessage, room=room)

 

def mine():

    @socketio.on('join')

    def on_join(data):

        username = data["username"]

        room = data["room"]

        join_room(room)

        mymessage = 'user {} has joined room {}'.format(username, room)

        emit('room_join', mymessage, room=room)

 

 

@socketio.on('leave')

def on_leave(data):

    username = data["username"]

    room = data["room"]

    leave_room(room)

    mymessage = 'user {} has joined room {}'.format(username, room)

    emit('room_leave', mymessage, room=room)

 

@socketio.on('new_room')

def new_room(data):

    ROOMS.append(data['new_room_name'])

    room = data['new_room_name']

    username = data['username']

    join_room(data['new_room_name'])

    mymessage = 'user {} has joined room {}'.format(username, room)

    emit('new_room', mymessage, room=room)

 

 

if __name__ == '__main__':

    socketio.run(app)

Client side code

<html>

<head>

<title>Chat Room</title>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(document).ready(function() {



   var socket = io.connect('http://127.0.0.1:5000');

   var socket_attendence = io('http://127.0.0.1:5000/attendence_namespace')



   // $('#sendbutton').on('click', function() {

   // 	socket_attendence.emit('attendence_request', {'otp':$('#myMessage').val(), 'token':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTE2Mzc2NDksImlhdCI6MTU4MDEwMTY0NCwic3ViIjoxfQ.QkM-DsJR0yuVbSL-ElkQeHG0xYPpF_BrA-lJhi8MZqk'});

   // 	$('#myMessage').val('');

   // });





   // $('#joinroom').on('click', function(){



   // });





   $('#joinroom').on('click', function(){

       socket.emit('join', {'username': 'kush', 'room': 'news'});

});



   $('#leaveroom').on('click', function(){

       socket.emit('leave', {'username': 'kush', 'room': 'ccc'});

});



   $('#myroom').on('click', function(){

       socket.emit('new_room', {'username': 'kush', 'new_room_name': 'ccc'});

});



   socket.on('new_room', function(msg) {

           alert(msg);

       });

   socket.on('room_join', function(msg) {

       alert(msg);

   });

   socket.on('room_leave', function(msg) {

       alert(msg);

   });









});

 </script>



<ul id="messages"></ul>

<input type="text" id="myMessage">

<button id="sendbutton">Send</button>

<button id="joinroom">JOIN</button>

<button id="leaveroom">Leave</button>

<button id="myroom">MyRoom</button>

</body>

</html>
@1UC1F3R616
Copy link
Author

1UC1F3R616 commented Jun 24, 2020 •
edited
Loading

  • use http in client side file even when server is running on http
  • CORS error happens when client is not able to find the given namespaces and this
  • check that your address is correct in client side file for connections

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment