文章目录
前言
作为一个小白,说实话看文档是真的挺艰难的,而且网络上关于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('<', '<').replace('>', '>').replace(' ', ' ')
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('<', '<').replace('>', '>').replace(' ', ' ')
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)
总结
如果之后这个聊天室还有一些完善的方面,我还是会继续写博客,记录一下我作为小白的艰苦,也希望能够帮到其他的小白[doge]