Vue 做为客户端
import Vue from 'vue';

/**
 * Created by mao-siyu on 17-12-21.
 */
class WS {

    constructor() {
        // 定时器ID用来执行网络重新链接
        this.intervalId = null;
        this.initConnect();
    }

    /**
     * 初始化链接配置
     */
    initConnect() {

        // 初始化 WebSocket 对象
        this.webSocket = new WebSocket(`ws://localhost:10086/websocket`);

        // 监听 WebSocket 连接异常的回调信息
        this.webSocket.onerror = (evt) => {
            console.log('%c%s', 'color:red;', '=============连接异常=============');
        };

        // 监听 WebSocket 服务端未连接的回调信息
        this.webSocket.onclose = (evt) => {
            console.log('%c%s', 'color:blue;', '=============网络连接已断开=============');
            if (!this.intervalId) {
                // 尝试重新链接
                this.intervalId = setInterval(() => {
                    console.log('%c%s', 'color:blue;', '=============正在尝试重新连接=============');
                    this.initConnect();
                }, 3000);
            }
        }

        // 监听 WebSocket 连接成功的回调信息
        this.webSocket.onopen = (evt) => {
            console.log('%c%s', 'color:purple;', '=============服务器已连接=============');
            if (this.intervalId) {
                // 服务器链接成功,清除重链定时器
                window.clearInterval(this.intervalId);
                this.intervalId = null;
            }
        }

        // 监听 WebSocket 接收消息
        this.webSocket.onmessage = (evt) => {
            // console.log('%c%s', 'color:green;', evt.data);
            this.onmessage(evt.data);
        }

    }

    /**
     * WebSocket 接收消息回调方法
     * @param msg
     */
    onmessage(msg) {
        console.log(msg)
        this.send(`你好我是 Client {new Date()}`);
    }

    /**
     * WebSocket 发送消息方法
     * @param callback
     */
    send(info) {
        this.webSocket.send(info);
    }

}

// 添加到 Vue原型链
Vue.prototype.WebSocket = new WS();




python 做为服务端

安装: pip3 install websockets

#!/usr/bin/python
# -*- coding: utf-8 -*-
# @Time    : 2020/12/03 11:28
# @Author  : Eric.Mao
# @FileName: ws.py
# @Software: PyCharm
# @Blog    : http://www.dev-share.top/

import asyncio
import websockets


# 接收客户端消息, 使用 (无限循环 + 线程阻塞) 技术来实践会话监听
async def recv_msg(websocket, path):
    # 无限循环
    while True:
        # 线程阻塞, 等待接收客户端信息
        recv_text = await websocket.recv()
        print(f'{recv_text}')

        # 向客户端发送信息
        response_text = f"your submit context: {recv_text}"
        await websocket.send(response_text)


if __name__ == '__main__':
    server = websockets.serve(recv_msg, 'localhost', 10086)
    asyncio.get_event_loop().run_until_complete(server)
    asyncio.get_event_loop().run_forever()

分类: vue

毛巳煜

高级软件开发全栈架构师

工信部备案号:辽ICP备17016257号-2