简介

技术栈：

• 前端页面：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(){
    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)

部署

（未完待续）

踩坑

（未完待续）