簡介
技術棧：
- 前端頁面：Vue
- 后端響應：Flask + Flask - SocketIO
- 部署在 Ubuntu 服務器上，通過 Nginx 反代，可通過 HTTPS 連接
實現(xiàn)的效果：
- 在線人數(shù)顯示
- 用戶名列表顯示
- 單一用戶名驗證
已經(jīng)部署在我自己的服務器上，歡迎體驗 Demo : https://chat.7uvss.me/
感謝王同學幫忙寫了精美的頁面种玛！
代碼部分
前端
單頁面
App.vue
<template>
<div>
<div>當前在線人數(shù)：{{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="請輸入內(nèi)容" @keyup.enter.native="sendMessage()" ></el-input>
<el-button type="text" round @click="sendMessage()" >發(fā)送</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('未輸入用戶名或發(fā)送消息為空');
}
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)
部署
（未完待續(xù)）
踩坑
（未完待續(xù)）
