bmcculley/app.py

## app.py
from flask import Flask, render_template, session, copy_current_request_context, jsonify
from flask_socketio import SocketIO, emit, disconnect
from threading import Lock


async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = 'ceafa6fe-f968-4d7d-8583-4252c5ab54a4' # change me
socketio = SocketIO(app, async_mode=async_mode)
thread = None
thread_lock = Lock()

def some_function():
    socketio.emit('my_response', {'data': 'new client connected', 'count': 411}, namespace='/test')

@app.route('/')
def index():
    return render_template('index.html', async_mode=socketio.async_mode)


@app.route('/send-message')
def send_message():

    some_function()

    return jsonify({'msg':'sent'})

@socketio.on('my_event', namespace='/test')
def test_message(message):
    session['receive_count'] = session.get('receive_count', 0) + 1
    emit('my_response',
         {'data': message['data'], 'count': session['receive_count']})


@socketio.on('my_broadcast_event', namespace='/test')
def test_broadcast_message(message):
    session['receive_count'] = session.get('receive_count', 0) + 1

    emit('my_response',
         {'data': message['data'], 'count': session['receive_count']},
         broadcast=True)


@socketio.on('disconnect_request', namespace='/test')
def disconnect_request():
    @copy_current_request_context
    def can_disconnect():
        disconnect()

    session['receive_count'] = session.get('receive_count', 0) + 1
    emit('my_response',
         {'data': 'Disconnected!', 'count': session['receive_count']},
         callback=can_disconnect)


if __name__ == '__main__':
    socketio.run(app, debug=True, host='0.0.0.0')

## index.html
<!DOCTYPE HTML>
<html>
<head>
    <title>Socket-Test</title>
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {

            namespace = '/test';
            var socket = io(namespace);

            socket.on('connect', function() {
                socket.emit('my_event', {data: 'connected to the SocketServer...'});
            });

            socket.on('my_response', function(msg, cb) {
                $('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
                if (cb)
                    cb();
            });
            $('form#emit').submit(function(event) {
                socket.emit('my_event', {data: $('#emit_data').val()});
                return false;
            });
            $('form#broadcast').submit(function(event) {
                socket.emit('my_broadcast_event', {data: $('#broadcast_data').val()});
                return false;
            });
            $('form#disconnect').submit(function(event) {
                socket.emit('disconnect_request');
                return false;
            });
        });
    </script>
</head>
<body style="background-color:white;">

    <h1 style="background-color:white;">Socket</h1>
    <form id="emit" method="POST" action='#'>
        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
        <input type="submit" value="Send Message">
    </form>
    <form id="broadcast" method="POST" action='#'>
        <input type="text" name="broadcast_data" id="broadcast_data" placeholder="Message">
        <input type="submit" value="Send Broadcast Message">
    </form>

    <form id="disconnect" method="POST" action="#">
        <input type="submit" value="Disconnect Server">
    </form>
    <h2 style="background-color:white;">Logs</h2>
    <div id="log" ></div>
</body>
</html>
	from flask import Flask, render_template, session, copy_current_request_context, jsonify
	from flask_socketio import SocketIO, emit, disconnect
	from threading import Lock


	async_mode = None
	app = Flask(__name__)
	app.config['SECRET_KEY'] = 'ceafa6fe-f968-4d7d-8583-4252c5ab54a4' # change me
	socketio = SocketIO(app, async_mode=async_mode)
	thread = None
	thread_lock = Lock()

	def some_function():
	socketio.emit('my_response', {'data': 'new client connected', 'count': 411}, namespace='/test')

	@app.route('/')
	def index():
	return render_template('index.html', async_mode=socketio.async_mode)


	@app.route('/send-message')
	def send_message():

	some_function()

	return jsonify({'msg':'sent'})

	@socketio.on('my_event', namespace='/test')
	def test_message(message):
	session['receive_count'] = session.get('receive_count', 0) + 1
	emit('my_response',
	{'data': message['data'], 'count': session['receive_count']})


	@socketio.on('my_broadcast_event', namespace='/test')
	def test_broadcast_message(message):
	session['receive_count'] = session.get('receive_count', 0) + 1

	emit('my_response',
	{'data': message['data'], 'count': session['receive_count']},
	broadcast=True)


	@socketio.on('disconnect_request', namespace='/test')
	def disconnect_request():
	@copy_current_request_context
	def can_disconnect():
	disconnect()

	session['receive_count'] = session.get('receive_count', 0) + 1
	emit('my_response',
	{'data': 'Disconnected!', 'count': session['receive_count']},
	callback=can_disconnect)


	if __name__ == '__main__':
	socketio.run(app, debug=True, host='0.0.0.0')
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Socket-Test</title>
	<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.socket.io/4.0.1/socket.io.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {

	namespace = '/test';
	var socket = io(namespace);

	socket.on('connect', function() {
	socket.emit('my_event', {data: 'connected to the SocketServer...'});
	});

	socket.on('my_response', function(msg, cb) {
	$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
	if (cb)
	cb();
	});
	$('form#emit').submit(function(event) {
	socket.emit('my_event', {data: $('#emit_data').val()});
	return false;
	});
	$('form#broadcast').submit(function(event) {
	socket.emit('my_broadcast_event', {data: $('#broadcast_data').val()});
	return false;
	});
	$('form#disconnect').submit(function(event) {
	socket.emit('disconnect_request');
	return false;
	});
	});
	</script>
	</head>
	<body style="background-color:white;">

	<h1 style="background-color:white;">Socket</h1>
	<form id="emit" method="POST" action='#'>
	<input type="text" name="emit_data" id="emit_data" placeholder="Message">
	<input type="submit" value="Send Message">
	</form>
	<form id="broadcast" method="POST" action='#'>
	<input type="text" name="broadcast_data" id="broadcast_data" placeholder="Message">
	<input type="submit" value="Send Broadcast Message">
	</form>

	<form id="disconnect" method="POST" action="#">
	<input type="submit" value="Disconnect Server">
	</form>
	<h2 style="background-color:white;">Logs</h2>
	<div id="log" ></div>
	</body>
	</html>