简介
技术栈：
前端页面：Vue
后端响应：Flask + Flask - SocketIO
部署在 Ubuntu 服务器上，通过 Nginx 反代，可通过 HTTPS 连接
实现的效果：
在线人数显示
用户名列表显示
单一用户名验证
已经部署在我自己的服务器上，欢迎体验 Demo : https://chat.7uvss.me/
感谢王同学帮忙写了精美的页面！
代码部分
前端
单页面
App.vue
当前在线人数：{{onlineUserSum}} 用户列表：
{{username}}
----
{{message.username}} 说：
{{message.msg}}
检验
发送
export default {
data () {
return {
historyMessage:[],
message1:'',
username:'',
onlineUserSum:'',
onlineUsernameList:[],
usernameOK:false
}
},
created(){
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
destroyed(){
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
},
methods: {
sendMessage(){
if( this.message1 =='' || this.username =='' || this.usernameOK == false)
{
this.$message.error('未输入用户名或发送消息为空');
}
else
{
this.$socket.emit('newmessage',{'username':this.username,'msg':this.message1});
this.message1 = '';
}
},
verifyUsername(){
this.$socket.emit("verifyUsername",{'username':this.username});
},
beforeunloadFn() {
this.$socket.emit("removeUsername",{'username':this.username});
// ...
}},
sockets:{
newmessage:function(getMessage){
this.historyMessage.push(getMessage)
},
usercount:function(Sum){
this.onlineUserSum = Sum.count
},
checkUsername:function(result){
if(result.isOK == "false"){
this.$message.error('用户名已被占用');
}
else{
this.usernameOK = true
}
},
onlineUsernameList:function(list){
this.onlineUsernameList = list
},
},
}
后端
Flask 配合 Flask - SocketIO
app.py
from flask import Flask
from flask_socketio import SocketIO,send,emit
from flask_cors import *
app = Flask(__name__)
CORS(app, supports_credentials=True)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app,cors_allowed_origins='*')
onlineUserSum = 0
usernamelist = []
@socketio.on('connect')
def connect():
global onlineUserSum
onlineUserSum += 1
emit('usercount', {'count': onlineUserSum}, broadcast=True)
@socketio.on('disconnect')
def disconnect():
global onlineUserSum
onlineUserSum -= 1
emit('usercount', {'count': onlineUserSum}, broadcast=True)
@socketio.on('removeUsername')
def removeUsername(delname):
global usernamelist
print("aaa")
if(delname['username'] in usernamelist):
print("abc")
usernamelist.remove(delname['username'])
emit('onlineUsernameList',{'list':usernamelist},broadcast=True)
@socketio.on('newmessage')
def new_message(message_body):
emit('newmessage', {'username':message_body['username'],'msg':message_body['msg']}, broadcast=True)
@socketio.on('verifyUsername')
def verifyUsername(unverify):
global usernamelist
if(unverify['username'] not in usernamelist):
usernamelist.append(unverify['username'])
emit('checkUsername',{'isOK':'true'})
emit('onlineUsernameList',{'list':usernamelist},broadcast=True)
else:
emit('checkUsername',{'isOK':'false'})
if __name__ == '__main__':
socketio.run(app,debug=True,host='127.0.0.1',port=5000)
部署
(未完待续)
踩坑
(未完待续)