Vue + Socket.IO + Flask 搭建简易聊天室

简介 技术栈： 前端页面：Vue + ElementUI 后端相应：Flask + Flask - SocketIO 部署在 Ubuntu 服务器上，通过 Nginx 反代，可通过 HTTPS 连接 最后实现的效果： 在线人数显示 用户名列表显示 单一用户名验证 已经部署在我自己的服务器上，欢迎体验 Demo : https://chat.7uvss.me/ 没写 CSS 样式，所以效果图有点丑： 代码部分 前端 单页面，没什么花里胡哨的 App.vue 后端 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) 部署 （未完待续） 踩坑 （未完待续）

本文章由javascript技术分享原创和收集