简介
技术栈:
前端页面: vue + ElementUI
后端相应: Flask + Flask - SocketIO
部署在 Ubuntu 服务器上, 通过 Nginx 反代, 可通过 HTTPS 连接
最后实现的效果:
在线人数显示
用户名列表显示
单一用户名验证
已经部署在我自己的服务器上, 欢迎体验 Demo : https://chat.7uvss.me/
没写 CSS 样式, 所以效果图有点丑:
代码部分
前端
单页面, 没什么花里胡哨的
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(){ Windows.addEventListener('beforeunload', e => this.beforeunloadFn(e)) }, destroyed(){ Windows.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)
部署
踩坑
来源: http://www.jianshu.com/p/264b3908921d