flask-socketio + vue-socket.io 組合使用demo

manage.pycss

import datetime import json from flask_socketio import Namespace, emit, SocketIO, disconnect from flask import Flask, render_template,request app = Flask(__name__) socketio = SocketIO(app,cors_allowed_origins="*") class MyCustomNamespace(Namespace): def __init__(self,namespace): super(MyCustomNamespace, self).__init__(namespace) self.sid = None def on_connect(self): self.sid = request.sid print('創建鏈接成功！-{}'.format(self.sid)) def on_disconnect(self): print('客戶端斷開鏈接！') def close_room(self, room): socketio.close_room(room=self.sid) print('{}-斷開鏈接'.format(self.sid)) def on_my_event(self, data): while True: print(data) socketio.sleep(5) current_date = str(datetime.datetime.now()) dic = {'current_date': current_date} res_json = json.dumps(dic) emit('server_response', res_json) socketio.on_namespace(MyCustomNamespace('/test')) if __name__ == '__main__': socketio.run(app)

Vue 部分vue

<template>
  <div>

    <h1>websocket鏈接</h1>
  </div>
</template>

<script> export default{ data(){ return{ id:'' } }, sockets:{ // 通訊的name //這裏是監聽connect事件 connect: function(){ this.id=this.$socket.id // alert('創建鏈接') this.$socket.emit('my_event',9999) }, disconnect: function(){ alert('斷開鏈接') }, reconnect: function(){ console.log('從新鏈接') this.$socket.emit('conect') }, server_response: function(data){ console.log('接收數據',data) } }, mounted(){ this.$socket.emit('connect'); //在這裏觸發connect事件 } } </script>

<style>
</style>

App.vue

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false // 引入socket.io import VueSocketIO from 'vue-socket.io'

// 引入Mint-ui // import MintUI from 'mint-ui'
// 安裝插件 // Vue.use(MintUI);  //裏面其實作的就是註冊全部的全局組件，給Vue.prototype 掛載一些對象，方便實用，組件內的this.xxx就可使用了 // 引入css // import 'mint-ui/lib/style.css' Vue.use(new VueSocketIO({ debug: true, connection: 'http://127.0.0.1:5000/test' })) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

main.js