前言

作为一个小白，说实话看文档是真的挺艰难的，而且网络上关于flask-socketio的相关知识又挺少的，所以写了这个博客，也是为了一些像我一样啥都不会的兄弟了解一下flask-socketio的基本使用，也算是记录了我的这个聊天室的制作过程，就算是我的小日志了，如果想看后端详细代码的话可以点击上一篇博客
如果想直接拿代码跑的话可以直接访问我的github
如果下载下来不会跑的话，上一篇博客也有讲了，这里就不再赘述啦

目前效果

在这里插入图片描述

一、这次添加了什么

自动滚轮
空格，尖括号的一些处理
房间功能

二、具体怎么实现的

1.滚轮

这个使用到了js的一段代码，如下：
其中messageBox是放置信息的那个大的白框框，是一个div元素，如果内容溢出设置滚轮是通过css来实现的

overflow-y: scroll;

messageBox.scrollTop = messageBox.scrollHeight

2.空格尖括号

由于我的信息是通过一个div来放置的（具体可以看上一篇博客，或者到github上看一看），所以会出现尖括号或者空格展示不了的情况
这里需要在后端进行一点点操作
大家可以看到，在data[‘message’] = data.get(‘message’)…这里进行了字符串替换，使得空格或者尖括号能够在html中展示

@socketio.on('send msg')
def handle_message(data):
    print('sendMsg' + str(data))
    room = session.get('room')
    data['message'] = data.get('message').replace('<', '&lt;').replace('>', '&gt;').replace(' ', '&nbsp;')
    socketio.emit('send msg', data, to=room)

3.房间

官方文档是这么解释的

我的感觉就是实现了单聊和群聊的一个工具，单聊就是提供一个只有双方知道的房间号，群聊就是提供一个一群人都知道的房间号
那我本来是看了官方文档，一脸懵逼的，然后我上bilibili啥的看了一些聊天室的视频，翻了一下《flask web开发实战》这本书里面的相关讲解，大概明白了，房间这个东西，除了可能需要前段给到后端房间号（也可以不给，比如说一个好友平台，点击好友名，跟好友聊天，这个房间号应该是后端来提供的），其他的在前端都不用写。
那后端加入了房间的改变在哪呢？
且听我慢慢道来

登录时

我们看这个flask函数，可以发现，在post方法这里，接受了room，并且存在了会话中

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        if 'username' in session:
            return redirect(url_for('chat'))
        return render_template('index.html')
    else:
        username = request.form.get('username')
        room = request.form.get('room')
        session['username'] = username
        session['room'] = room
        return redirect(url_for('chat'))

聊天页面

在这里我们把room传入模板，方便显示房间名

@app.route('/chat/')
def chat():
    if 'username' in session and 'room' in session:
        username = session['username']
        room = session['room']
        return render_template('chat.html', username=username, room=room)
    else:
        return redirect(url_for('index'))

发送信息

这个事件监听函数的最后，可以发现，多了一个to参数，我们传入的是房间名

@socketio.on('send msg')
def handle_message(data):
    print('sendMsg' + str(data))
    room = session.get('room')
    data['message'] = data.get('message').replace('<', '&lt;').replace('>', '&gt;').replace(' ', '&nbsp;')
    socketio.emit('send msg', data, to=room)

加入离开房间

前端
这边可以看到，一进入这个网页，就会自动触发事件，发送给后端
离开房间是通过给超链接设置点击事件实现的

// 加入房间
   socket.emit('join', {
       username: username,
       room: room
   })
   // 退出房间
   leaveroom.onclick = function () {
       socket.emit('leave', {
           username: username,
           room: room
       })
   }

后端
后端的代码中，需要用到flask-socketio提供的join_room和leave_room方法，传入房间名即可，然后发送信息时，依旧需要指定to参数为房间名

@socketio.on('join')
def on_join(data):
    username = data.get('username')
    room = data.get('room')
    try:
        room_user[room].append(username)
    except:
        room_user[room] = []
        room_user[room].append(username)

    join_room(room)
    print('join room:  ' + str(data))
    print(room_user)
    socketio.emit('connect info', username + '加入房间', to=room)


@socketio.on('leave')
def on_leave(data):
    username = data.get('username')
    room = data.get('room')
    room_user[room].remove(username)
    leave_room(room)
    print('leave room   ' + str(data))
    print(room_user)
    socketio.emit('connect info', username + '离开房间', to=room)