使用flask_socketio开发简易聊天室，解决socket_io跨域问题

Demo是前后端分离的，后端采用的是Python Flask，前端是HTML。此demo主要是连接后存储用户信息、浏览器ID，消息接口通过浏览器ID作为依据往用户浏览器推送消息

后端代码

"""
Author:zengzhan.SI
Date:July 1, 2020
"""
from flask import Flask, request
from flask_cors import CORS
from flask_socketio import SocketIO, emit, join_room
import json
from datetime import datetime


app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'

# cors_allowed_origins="*" Solve cross-domain problems
socketio = SocketIO(app, cors_allowed_origins="*")


# Store user information
user_dict = dict()


def result_json(data=None, status=None, version="v1", total=None):
    result_dict = {
        "data": data,
        "status": status,
        "version": version,
        "total": total if total else 0
    }
    return result_dict


def get_user_name(key):
    """
    Get user information
    :param key: User Name
    :return: The dictionary or None that stores user information
    """
    try:
        data = user_dict[key]
    except:
        data = None
    return data


def set_user_name(key, value):
    """
    Store user information
    :param key: User Name
    :param value: A dictionary that stores user information
    :return:
    """
    user_dict[key] = value


def ack(value):
    """
    Callback function, broadcast mode does not trigger
    :param value:
    :return:
    """
    return result_json(value)


@socketio.on("connec")
def connect_client(data):
    """
    Get users online
    This function is triggered when a user logs in
    Query whether the current user has a login history
    Updating the user's new Session ID and online state exists
    The user login record is inserted if it does not exist
    :param data: message
    :return:
    """
    user_name = data["user_name"]
    sid = request.sid
    redis_data = get_user_name(user_name)

    if redis_data is None:
        user_data = {
            "user_name": user_name,
            "online_state": 1,
            "SID": sid
        }
    else:
        user_data = json.loads(redis_data)
        sid = user_data["SID"]

        user_data["SID"] = sid
        user_data["online_state"] = 1

    # Store the user's online status
    user_data = json.dumps(user_data)
    set_user_name(user_name, user_data)

    socketio.emit("connec", user_name, broadcast=True)


@socketio.on("message")
def messgae_pro(message):
    """
    Message processing interface
    :param message: message
    :return:
    """
    send_user_name = message["send_user_name"]
    recv_user_name = message["recv_user_name"]
    room_name = message["room_name"]
    msg = message["msg"]

    # Query the sender's SID
    send_user_data = get_user_name(send_user_name)
    if send_user_data:
        send_user_data = json.loads(send_user_data)
        send_user_sid = send_user_data["SID"]

    # Query the recipient's SID
    recv_user_data = get_user_name(recv_user_name)
    # Determine if the recipient is online
    if recv_user_data:
        recv_user_data = json.loads(recv_user_data)
        online_state = recv_user_data["online_state"]
    else:
        online_state = 0

    if online_state == 0:
        message = {"msg": "The user is offline"}
        emit("message", result_json(data=message, status=500))
    else:
        recv_user_sid= recv_user_data["SID"]

        join_room(room=room_name)
        info_dict = {
            "send_user_name": send_user_name,
            "recv_user_name": recv_user_name,
            "room_name": room_name,
            "msg": msg,
            "msg_type": 0,
            "online_state": online_state,
            "date": datetime.strftime(datetime.now(), "%Y-%m-%d %H:%M:%S")
        }
        # Return the information to the client
        # Send a message to the recipient
        socketio.emit('message', result_json(data=info_dict, status=200),
                      room=recv_user_sid,
                      callback=ack
                      )
        # Send a message to the sender
        socketio.emit('message', result_json(data=info_dict, status=200),
                      room=send_user_sid,
                      callback=ack
                      )


if __name__ == '__main__':
    socketio.run(app, host="0.0.0.0", port=9010)

前端代码

用户1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
    <!--    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>-->
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            namespace = '/message/';
            var socket = io.connect(location.protocol + '//' + "服务端IP" + ':' + "9010");
            //连接后发送日志
            socket.on('connect', function () {
                socket.emit('connec', {
                    user_name: "张三"
                });
                console.log('connected', location.protocol + '//' + "服务端IP" + ':' + "9010", '张三')
            });
            var room = "张三_李四"
            //点击发送时将text框的内容发送到后端
            $('form#emit').submit(function (event) {
                socket.emit('message', {
                    data: "dwdwdw",
                    send_user_name: "张三",
                    room_name: room,
                    recv_user_name: "李四",
                    msg: $('#emit_data').val()
                });
                return false;
            });
            //接收后端广播的信息
            socket.on('message', function (msg) {
                console.log(msg.data)
               if (msg.data.room_name == room){
                    $('#log').append('<br>' + $('<div/>').text(msg.data.msg).html());
                }
            });
            socket.on("state", function (msg) {
            console.log(msg.data)
            $('#state').append('<br>' + $('<div/>').text(msg.data.user_name).html());
            })
        });
    </script>
</head>
<body>
<form id="emit" method="POST" action='#'>
    <input type="text" name="emit_data" id="emit_data" placeholder="Message">
    <input type="submit" value="发送">
</form>
<h2>Receive:</h2>
<div id="log"></div>
<div id="state"></div>
</body>
</html>

用户2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
    <!--    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>-->
    <script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            namespace = '/message/';
            var socket = io.connect(location.protocol + '//' + "服务端IP" + ':' + "9010");
            //连接后发送日志
            socket.on('connect', function () {
                socket.emit('connec', {
                    user_name: "李四"
                });
                console.log('connected', location.protocol + '//' + "服务端IP" + ':' + "9005")
            });
            var room = "张三_李四"
            //点击发送时将text框的内容发送到后端
            $('form#emit').submit(function (event) {
                socket.emit('message', {
                    data: "dwdwdw",
                    send_user_name: "李四",
                    room_name: room,
                    recv_user_name: "张三",
                    msg: $('#emit_data').val()
                });
                return false;
            });
            //接收后端广播的信息
            socket.on('message', function (msg) {
                console.log(11111, msg.data)
                if (msg.data.room_name == room){
                    $('#log').append('<br>' + $('<div/>').text(msg.data.msg).html());
                }
            });
           socket.on("state", function (msg) {
               console.log(msg.data)
            $('#state').append('<br>' + $('<div/>').text(msg.data.user_name).html());
            })
        });
    </script>
</head>
<body>
<form id="emit" method="POST" action='#'>
    <input type="text" name="emit_data" id="emit_data" placeholder="Message">
    <input type="submit" value="发送">
</form>
<h2>Receive:</h2>
<div id="log"></div>
<div id="state"></div>
</body>
</html>