Flutter 및 Python 웹 소켓 Ft. 소켓-IO(2부)

마지막 튜토리얼에서는 일부 socket.on() 이벤트를 사용하여 socket-IO 서버를 빌드합니다.

이제 지정된 방에서 사용자가 보낸 메시지를 유지할 수 있도록 MySQL 서버를 플라스크와 연결하겠습니다.

Install MySQL in your local machine.

우리는 데이터베이스에 대해 다음 구조를 따를 것입니다.

데이터베이스를 만들 수 있습니다.

새 데이터베이스를 만듭니다.

create database database_name;

생성된 데이터베이스를 선택합니다.

use database_name;

사용자 테이블을 생성합니다.

create table user
(
    userid   int auto_increment primary key,
    username varchar(50) not null,
    roomId   varchar(50) null,
    constraint username unique (username)
);

메시지, 즉 "채팅"테이블에 대한 테이블을 만듭니다.

create table chats
(
    msg      varchar(200) not null,
    username varchar(200) not null,
    room     varchar(200) not null,
    ts       datetime     not null
);

이제 데이터베이스가 설정되었으며 파이썬 스크립트와 연결할 수 있습니다.

Flask 앱에 MySQL 데이터베이스 통합:

데이터베이스와 연결합니다.

줄 아래에 다음 줄을 추가합니다socketio = SocketIO(app, cors_allowed_origins='*').

# MYSQL Config

mysql = MySQL()
# name of the database user
app.config['MYSQL_DATABASE_USER'] = 'username'
# password of the database user
app.config['MYSQL_DATABASE_PASSWORD'] = 'yourpassword'
# database name
app.config['MYSQL_DATABASE_DB'] = 'database_name'
# Domain or Host,Keep it localhost if you are testing on localhost
app.config['MYSQL_DATABASE_HOST'] = 'localhost'

mysql.init_app(app)
# connection
conn = mysql.connect()
# Cursor for MySQL
cursor = conn.cursor()
# create a new db if you have not created yet or remove comment from next line
# cursor.execute("create database newdb;")
cursor.execute("use newdb;")

이제 데이터베이스와 연결되었습니다.

채팅을 받고 데이터베이스에 새 메시지를 추가하는 기능을 만듭니다.

roomId가 필요한 채팅을 가져오는 기능을 만들 수 있습니다.
roomId가 사용자가 지정한 것과 동일한 채팅 테이블에서 메시지 및 타임스탬프 속성만 가져옵니다.

def getChats(room):
    query = "select msg,ts from chats where room='%s' order by ts ; " % room
    cursor.execute(query)
    msgLst = cursor.fetchall()
    lst = []
    for msg in msgLst:
        lst.append({'msg': msg[0], 'ts': str(msg[1])})
    return lst

새 메시지를 채팅 테이블에 추가하는 다른 기능을 만들 수 있습니다.

이를 위해 메시지 텍스트, roomId, 사용자 이름이 필요하며 타임 스탬프에 시스템 날짜 시간 기능을 사용합니다.

def addNewMsg(msg, room, username):
    x = datetime.datetime.now()
    try:
        query = "insert into chats(msg, room, username,ts) values('%s','%s','%s','%s');" % (msg, room, username, x)
        cursor.execute(query)
    # committing the changes in database.
        conn.commit()
    except Exception as e:
        print(e)

Socket.on() 이벤트를 편집해야 하는 다음 부분으로 이동하겠습니다.

Socket.on() 이벤트의 필수 변경 사항:

'join' socket.on() 이벤트에 대해 이야기하겠습니다.

우리에게는 세 가지 다른 조건이 있습니다.

사용자가 처음 참여하는 경우 사용자 테이블에 데이터가 없다는 의미입니다. 이를 위해 우리는 새로운 사용자 데이터를 사용자 테이블에 기록하고 "user_name이 방에 입장했습니다."라는 메시지를 전송하여 해당 방에 알릴 필요가 있습니다.

사용자가 이미 존재하지만 다른 방에 참가했습니다. 룸에 참여하기 전에 그의 roomId를 업데이트해야 합니다.

사용자가 같은 방을 나가지 않고 다시 들어갔습니다. 조치가 필요하지 않습니다.

def join(message) 함수를 다음 코드로 대체합니다.

def join(message):
    room = message['roomId']
    username = message['username']
    join_room(room)
    query = "Select username,roomId from user where username='%s'" % username + ' ; '

    cursor.execute(query)
    user = cursor.fetchall()

    # if user not exist then create new user
    if len(user) == 0:
        try:
            query = "Insert into user values (0,'%s','%s')" % (username, room)
            cursor.execute(query)
            conn.commit()
            addNewMsg(msg=username + ' has entered the room.', username=username, room=room)

        except Exception as e:
            print(e)
    else:
        if user[0][1] != room:
            query = "UPDATE user SET roomId = '%s' WHERE username = '%s';" % (room, username)
            cursor.execute(query)
            conn.commit()
            addNewMsg(msg=username + ' has entered the room.', username=username, room=room)
    # getting all the messages
    emit('message', {'msg': getChats(room)}, room=room)

이제 다음 코드 줄을 사용하여 socket.on('text') 이벤트를 업데이트할 수 있습니다.

def text(message):
    room = message['room']
    username = message['username']
    addNewMsg(msg=username + " : " + message['msg'], username=username, room=room)
    emit('message', {'msg': getChats(room)}, room=room)

다음 코드 줄을 사용하여 마지막 및 최소 업데이트 socket.on('left) 이벤트:

def left(message):
    room = message['room']
    username = message['username']
    addNewMsg(msg=username + ' has left the room.', username=username, room=room)
    leave_room(room)

    lst = getChats(room)
    if len(lst) == 0:
        emit('message', {'msg': [{'msg': "No messages has been sent"}]})
    else:
        emit('message', {'msg': lst}, room=room)

Done!!!!! Lets test it.

'참가' 방 :
조인 이벤트에서 다음 데이터를 보냅니다.{ "roomId":"test123", "username":"smk" }

방에 '텍스트':
다음 데이터를 보냅니다.{ "room":"test123", "username":"smk", "msg":"I am new " }

이제 방에서 나갑니다:

다음 데이터를 보냅니다.
{
"username":"smk",
"room":"test123"
}



만세.

다음 파트에서는 ​​flutter socket-IO 클라이언트 패키지를 사용하여 emit 및 on 이벤트를 사용하여 실시간 채팅을 위한 flutter 웹 애플리케이션을 만들 것입니다.

1부 놓친 경우:

계속 지켜봐....

Source Code

Follow me:

GitHub