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>
 

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}`);
}
});
})
});

运行前后端代码:

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

vue+websocket demo 实例的更多相关文章

  1. 基于websocket vue 聊天demo 解决方案

    基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...

  2. Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试

    Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...

  3. 一个注解方式webSocket demo

    前段时间在研究websocket.其中遇到了一些bug.这里跟大家分享这过程. 首先介绍一下websocket WebSocket是HTML5的一种新协议,实现了浏览器和服务器的双全工通信,能更好的节 ...

  4. Vue组件开发实例(详细注释)

    Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  5. SpringBoot+Vue+WebSocket 实现在线聊天

    一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...

  6. Vue项目入门实例

    前言 本文记录Vue2.x + Element-UI + TypeScript语法入门实例 为什么要用TypeScript? 1.TypeScript是JavaScript的超集,利用es6语法,实现 ...

  7. vue自定义指令实例使用(实例说明自定义指令的作用)

    在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...

  8. 【java】之 apache commons-codec 与Apache Digest demo实例,支持md5 sha1 base64 hmac urlencode

    使用commons-codec 进行加密的一些操作 package com.jiepu.ApacheDigest; import java.io.FileInputStream; import org ...

  9. vue学习笔记 实例(二)

    var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...

随机推荐

  1. Mac音频播放

    Mac音频播放 audioqueue播放pcm数据 http://msching.github.io/blog/2014/08/02/audio-in-ios-5/ audiounit播放pcm数据  ...

  2. Synchronized可重入锁通俗易懂的简单分析

    可重入锁概念: 当一个线程得到一个对象锁后,再次请求此对象时时可以再次得到该对象的锁的,这也证明synchronized方法/块的内部调用本类的其他synchronized方法/块时,时永远可以得到锁 ...

  3. gRPC应用C++

    1.  gRPC简述 RPC,远程方法调用,就是像调用本地方法一样调用远程方法. gRPC是Google实现的一种RPC框架,基于HTTP/2标准设计,带来诸如双向流.流控.头部压缩.单 TCP 连接 ...

  4. Replication Controller 和 Replica Set

    使用Replication Controller . Replica Set管理Pod Replication Controller (RC) 简写为RC,可以使用rc作为kubectl工具的快速管理 ...

  5. HTML&CSS基础-xHtml语法规范

    HTML&CSS基础-xHtml语法规范 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源码 <!DOCTYPE html> <html> ...

  6. Kubernetes网络之Flannel工作原理

    目录 1.Docker网络模式 1.1 bridge网络的构建过程 1.2 外部访问 2.Kubernetes网络模式 2.1 同一个Pod中容器之间的通信 2.2 不同Pod中容器之间的通信 2.3 ...

  7. 利用Git钩子实现代码发布

    目录 1.什么是git钩子 2.安装一个钩子 3.常用的钩子脚本类型 3.1 客户端钩子 3.1.1 pre-commit 3.1.2 prepare-commit-msg 3.1.3 commit- ...

  8. 调用百度API返回经纬度

    后台调用百度API接口生成: import java.io.BufferedReader; import java.io.IOException;import java.io.InputStreamR ...

  9. mysql - Centos安装MySQL

    环境:Centos7.3 No.1 切换为root用户,是则略过 su root No.2 下载MySQL的repo源 wget http://repo.mysql.com/mysql-communi ...

  10. formData上传文件

    需要将选中的xml传到后台,通过xslt转换为html html: <form id="uploadForm" enctype="multipart/form-da ...