本文将讲解vue使用websocket实现简单的前后端通信，提供具体的websocket实例代码供大家参考：

1、vue websocket 前端demo：

<!-- vue + websocket连接demo -->
<template>
    <div>
        <h1>vue + websocket连接demo</h1>
        <Button @click="test">test</Button>
    </div>
</template>


<script>
let socket;
// 给服务器发送一个字符串:
export default {
    data() {
        return {
            // 连接标志位
            lockReconnect: false,
            wsCfg: {
                // websocket地址
                url: "ws://127.0.0.1:8081"
            }
        };
    },
    methods: {
        createWebSocket() {
            try {
                // 创建Web Socket 连接
                socket = new WebSocket(this.wsCfg.url);
                // 初始化事件
                this.initEventHandle(socket);
            } catch (e) {
                // 出错时重新连接
                this.reconnect(this.wsCfg.url);
            }
        },
        initEventHandle(socket) {
            // 连接关闭时触发
            socket.onclose = () => {
                console.log("连接关闭");
            };
            // 通信发生错误时触发
            socket.onerror = () => {
                // 重新创建长连接
                this.reconnect();
            };
            // 连接建立时触发
            socket.onopen = () => {
                console.log("连接成功");
            };
            // 客户端接收服务端数据时触发
            socket.onmessage = msg => {
                // 业务逻辑处理
                console.log(msg.data, "ws:data");
            };
        },
        reconnect() {
            if (this.lockReconnect) {
                return;
            }
            this.lockReconnect = true;



            // 没连接上会一直重连，设置延迟避免请求过多
            setTimeout(() => {
                this.lockReconnect = false;
                this.createWebSocket(this.wsCfg.url);
            }, 2000);
        },
        test() {
            // 给服务器发送一个字符串:
            // ws.send("Hello!");
            socket.send("Hello!");
        }
    },
    mounted() {
        this.createWebSocket();
    }
};
</script>

2、node服务端启动websocket服务：

// 导入WebSocket模块:
const WebSocket = require('ws');

// 引用Server类:
const WebSocketServer = WebSocket.Server;

// 实例化:
const wss = new WebSocketServer({
    port: 8081
});

wss.on('connection', function (ws) {
    console.log(`[SERVER] connection()`);
    ws.on('message', function (message) {
        console.log(`[SERVER] Received: ${message}`);
        ws.send(`ECHO: ${message}`, (err) => {
            if (err) {
                console.log(`[SERVER] error: ${err}`);
            }
        });
    })
});

3、运行前后端代码：

 前端页面可以看到发送websocket数据后，接收到了后端的数据，实现了双向通信。

当然，我们还有更方便快捷的在vue中使用websocket的方法，那就是使用GoEasy提供的websocket服务。

目前GoEasy提供完整的websocket前后端解决方案，简单的几行代码集成，即可快速搭建您的专属websocket服务。 同时支持各种前端技术框架如小程序、uniapp、vue，支持各种服务端语言如php、java、python等。对websocket有需求的开发者可以来注册试用一下【立即注册】

原文地址： https://www.cnblogs.com/mengfangui/p/11320270.html