python + vue 实现websocket

python

import asyncio
import datetime
import random
import websockets

print(' ========= websocket is going to run =========')


async def time(websocket, path):
    while True:
        now = str(random.randint(0,100))
        print(now)
        await websocket.send(now)
        await asyncio.sleep(random.random() * 3)


start_server = websockets.serve(time, "10.200.125.3", 80)
print(' ========= websocket running =========')
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()


vue

<template>
    <div>
        <span>test</span>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="Number(textArea_test)"></el-progress>
    </div>
</template>

<script>
export default {
data() {
    return {
        websock: null,
        textArea_test:'',
        count_t:0
    }
},
 methods: {

    runSocket() {
    //   let count_rev = 0;
      this.ws = new WebSocket("ws://10.200.125.3/");
      this.ws.onopen = this.websocketonopen;
      this.ws.onerror = this.websocketonerror;
      this.ws.onmessage = this.websocketonmessage;
      this.ws.onclose = this.websocketclose;
    },
 
    // 定义 websocket open属性的函数
    websocketonopen: function () {
      console.log('WebSocket连接成功');
    },
    // 定义 websocket onerror属性的函数
    websocketonerror: function (e) {
      console.log('WebSocket连接发生错误');
      console.log(e)
    },
    // 定义 websocket onmessage属性的函数
    websocketonmessage: function (e) {
      this.count_t = this.count_t + 1;
      console.log(this.count_t);   //打印接收到了多少次服务端的消息
      this.textArea_test = e.data;  //改变界面上某个控件的展示内容
    },
    // 定义 websocket onclose属性的函数
    websocketclose: function (e) {
      console.log('connection closed');
      console.log(e)
    },
 
    openTest() {
      this.runSocket();
    }
},
created(){
    this.openTest()
}

}
 </script>