簡介
技術棧：
前端頁面：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)
部署
(未完待續)
踩坑
(未完待續)