简介
技术栈：
- 前端页面：Vue
- 后端响应：Flask + Flask - SocketIO
- 部署在 Ubuntu 服务器上，通过 Nginx 反代，可通过 HTTPS 连接
实现的效果：
- 在线人数显示
- 用户名列表显示
- 单一用户名验证
已经部署在我自己的服务器上，欢迎体验 Demo : https://chat.7uvss.me/
感谢王同学帮忙写了精美的页面！
代码部分
前端
单页面
App.vue
<template>
<div>
<div>当前在线人数：{{onlineUserSum}}</div>
<div>用户列表：</div>
<p v-for="username in onlineUsernameList.list" :key="username">{{username}}</p>
<div>----</div>
<p v-for="message in historyMessage" :key="message">
{{message.username}} 说：
<br>
{{message.msg}}
</p>
<el-input v-model="username" :disabled="usernameOK" placeholder="请输入用户名"></el-input>
<el-button type="text" round v-show="!usernameOK" @click="verifyUsername()">检验</el-button>
<br>
<el-input v-model="message1" placeholder="请输入内容" @keyup.enter.native="sendMessage()" ></el-input>
<el-button type="text" round @click="sendMessage()" >发送</el-button>
</div>
</template>
<script>
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
},
},
}
</script>
后端
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)
部署
（未完待续）
踩坑
（未完待续）
