精华内容
下载资源
问答
  • Vue网络套接字 Vue.js的插件。 该软件包不支持本地websockets 。 当时,我们建议使用或。... import VueWebsocket from "vue-websocket" ; Vue . use ( VueWebsocket ) ; 或连接到另一个地址: Vue
  • Vue项目打包部署总结

    2020-12-08 10:17:48
    来源 |https://wintc.top/article/29使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的...


    来源 | https://wintc.top/article/29

    使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。

    Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览:

    一、准备工作——服务器和nginx使用

    1. 准备一台服务器

    我的是ubuntu系统,linux系统的操作都差不多。没有服务器怎么破?

    如果你只是想体验一下,可以尝试各大厂的云服务器免费试用套餐,比如华为云免费试用,本文相关操作即是在华为云上完成的。

    不过如果想时常练练手,我觉得可以购买一台云服务器,比如上面的华为云或者阿里云都还挺可靠。

    2. nginx安装和启动

    轻装简行,这部分不作过多赘述(毕竟网上相关教程一大堆),正常情况下仅需下面两个指令:

    # 安装,安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功
    sudo apt-get install nginx
    # 启动
    sudo service nginx start
    

    启动后,正常情况下,直接访问 http://服务器ip 或 http://域名 (本文测试用的服务器没有配置域名,所以用ip,就本文而言,域名和ip没有太大区别)应该就能看到nginx服务器的默认页面了——如果访问不到,有可能是你的云服务器默认的http服务端口(80端口)没有对外开放,在服务器安全组配置一下即可。

    3、 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件

    查看nginx的配置,linux系统下的配置文件通常会存放在/etc目录下,nginx的配置文件就在/etc/nginx文件夹,打开文件/etc/nginx/sites-available/default(nginx可以有多个配置文件,通常我们配置nginx也是修改这个文件):

    可以看到默认情况下,nginx代理的根目录是/var/www/html,输入 http://服务器ip会访问这个文件夹下的文件,会根据index的配置值来找默认访问的文件,比如index.html、index.htm之类。

    我们可以更改root的值来修改nginx服务代理的文件夹:

    1)、创建文件夹/www,并创建index.html,写入"Hello world"字符串

    mkdir /www
    echo 'Hello world' > /www/index.html
    

    2)、修改root值为 /www

    3)、sudo nginx -t 检查nginx配置是否正确

    4)、加载nginx配置:sudo nginx -s reload

    再次访问页面,发现页面内容已经变成了我们创建的index.html:

    二、Vue项目打包同步文件到远程服务器

    1、 打包

    默认情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行yarn build 或者 npm run build即可。

    2、 同步到远程服务器

    我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹,剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里,比如同步到之前步骤中创建的/www。

    同步文件可以在git-bash或者powershell使用scp指令,如果是linux环境开发,还可以使用rsync指令:

    scp -r dist/* root@117.78.4.26:/www
    或
    rsync -avr --delete-after dist/* root@117.78.4.26:/www
    

    注意这里以及后续步骤是root使用用户远程同步,应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。

    为了方便,可以在package.json脚本中加一个push命令,以使用yarn为例(如果你使用npm,则push命令中yarn改成npm  run即可):

    "scripts": {
        "build": "vue-cli-service build",
        "push": "yarn build && scp -r dist/* root@117.78.4.26:/www"
      },
    

    这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题,就是命令执行的时候要求输入远程服务器的root密码(这里使用root来连接远程的,你可以用别的用户,毕竟root用户权限太高了)。

    为了避免每次执行都要输入root密码,我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。

    3、 同步ssh key

    1. 生成ssh key:使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址,直接回车就行,如果已经存在,则会询问是否覆盖:

    2. 同步ssh key到远程服务器,使用ssh-copy-id指令同步

    ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26
    


    输入密码后,之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器(此处是root用户家目录)~/.ssh/authorized_keys文件里:


    当然你也可以手动复制本地~/.ssh/id_rsa.pub(注意是pub结尾的公钥)文件内容追加到服务器~/.ssh/authorized_keys的后面(从命名可以看出该文件可以存储多个ssh key)

    注意:这里全程使用的是root用户,所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户,或许会存在同步文件失败的问题,此时需要远程服务器修改文件夹的读写权限(命令 chmod)。

    创建了一个测试项目(点击本链接可以在gihub查看)试一下,打包、文件上传一句指令搞定啦:

    访问一下,果然看到了我们熟悉的界面:

    至此,常规情况下发布Vue项目就介绍完了,接下来介绍非域名根路径下发布以及history路由模式发布方法。

    三、非域名根路径发布

    有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目,比如我们希望项目部署到http://a.com/test下,这样访问http://a.com/test访问到的是项目的首页,而非test前缀的地址会访问到其它项目。此时需要修改nginx配置以及Vue打包配置。

    1、 nginx配置

    只需要添加一条location规则,分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹,这里因为文件夹名称和访问路径不一致,需要用到alias这个配置:

    如果文件夹名称与访问路径一致都为test,那这里可以用root来配置:

    这里要将/test配置放到/之前,意味着在路由进入的时候,会优先匹配/test。如果根路径/下的项目有子路由/test,那http://xxxx/test只会访问到/www里的项目,而不会访问该子路由。

    2、项目配置

    为了解决打包后资源路径不对的问题,需要在vue.config.js中配置publicPath,这里有两种配置方式,分别将publicPath配置为./和/test:

    更新nginx配置,发布后即可正常访问啦。这里的两种配置方式是有区别的,接下来会看一下它们的区别。
    如果不进行项目配置,直接发布访问会出现JS、CSS等资源找不到导致页面空白的问题:

    该问题原因是资源引用路径不对,页面审查元素可以看到,页面引用的js都是从根路径下引用的:

    查看打包后的文件结构,可以看到js/css/img/static等资源文件是与index.html处于同级别的:

    对于两种配置方式,看看都是怎么生效的:

    1. publicPath配置为./, 打包后资源引用路径为相对路径:

    2. publicPath配置为/test,打包后资源相对路径为从域名根目录开始的绝对路径:

    两种配置都可以正确地找到JS、CSS等资源。不过还有个问题,那就是static中的静态资源依旧会找不到。

    3、绝对路径引用的静态资源找不到的问题

    因为在打包过程中,public下的静态资源都不会被webpack处理,我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时,这点非常头疼,你需要在每个引用的URL前面加上process.env.BASE_URL(该值即对应上文配置的publicPath),以使得资源能被正常访问到。我们可以在main.js把这个变量值绑定到Vue.prototype,这样每个Vue组件都可以使用它:

    Vue.prototype.$pb = process.env.BASE_URL
    

    在模板中使用:

    <img :src="`${$pb}static/logo.png`">
    

    然而,更加头疼并且没有良好解决方案的问题是在组件style部分使用public文件夹下的静态资源:

    • 如果需要使用图片等作为背景图片等,尽量使用内联方式使用吧,像在模板中使用一样。

    • 如果需要引入样式文件,则在index.html中使用插值方式引入吧。

    关于静态资源的问题,vue-cli的推荐是尽量将资源作为你的模块依赖图的一部分导入(即放到assets中,使用相对路径引用),避免该问题的同时也带来其它好处:

    四、history模式部署

    默认情况下,Vue项目使用的是hash路由模式,就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。

    正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会,这就是前端路由的原理,允许根据不同的路由页面局部更新而不刷新整个页面。

    H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

    1、项目配置

    在vue-router路由选项中配置mode选项和base选项,mode配置为'history';如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)


    2、 nginx配置

    对于history模式,假设项目部署到域名下的/test目录,访问http://xxx/test/about的时候,服务器会去找/test指向的目录下的about子目录或文件,很显然因为是单页面应用,并不会存在a这个目录或者文件,就会导致404错误:

    我们要配置nginx让这种情况下,服务器能够返回单页应用的index.html,然后剩下的路由解析的事情就交给前端来完成即可。

    这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。再次打开刚才的about地址,刷新页面也不会404啦:

    3、history模式部署到非域名根路径下

    非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。

    为什么呢?
    原因是它会导致router-link等的表现错乱,使用测试项目分别使用两种配置打包发布,审查元素就能看出区别。在页面上有两个router-link,Home和About:

    两种配置打包后的结果如下。

    1. publicPath配置为./或者空串:

    2. publicPath配置为/test:

    publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。

    五、结语

    关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨。

    写博客很累,不过收获也很多,还是要坚持;有时候别人转载自己的原创文章也不标明出处,竟然将写文章日期改得比原创还早,有点心累。本文中使用到的图片都加了个自己的水印,是前端实现的,原理也很简单,之后写一篇简短的文章分享一下。

    本文完~

    展开全文
  • 前言 在《 WebSocket简绍- 第一章》中简单的介绍了,Nodejs + WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。 1、Nodejs+WebSocket创建后台服务器功能 2、Vue视图层,接收后台数据并渲染页面 ...

    前言

    《 WebSocket简绍- 第一章》中简单的介绍了,Nodejs + WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。

    在这里插入图片描述

    1、Nodejs+WebSocket创建后台服务器功能

    2、Vue视图层,接收后台数据并渲染页面

    3、LocalStorage存储会话ID等用户信息

    vue + webpack 生成vue项目(基于vue-cli2.0)

    脚手架搭建项目也是非常好用,简单命令即可搞定

    vue init webpack web-im
    

    然后一路向下,填写项目名称,描述,作者等等信息,完成安装。

    现在都可以自动安装模块了,当然,你可以可以到目录下面执行npm install

     cd web-im
     npm install
    

    这就是整个生成后的项目结构。

    WebSocket服务端
    在项目根目录下新建server/index.js文件。
    在这里插入图片描述
    这就是整个生成后的项目结构。

    WebSocket服务端
    在项目根目录下新建server/index.js文件。

    var ws = require("nodejs-websocket");
    // 这里用到了moment,请大家自行安装
    var moment = require('moment');
    
    console.log("开始建立连接...")
    
    let users = [];
    
    // 向所有连接的客户端广播
    function boardcast(obj) {
     server.connections.forEach(function(conn) {
     conn.sendText(JSON.stringify(obj));
     })
    }
    
    function getDate(){
     return moment().format('YYYY-MM-DD HH:mm:ss')
    }
    
    var server = ws.createServer(function(conn){
     conn.on("text", function (obj) {
     obj = JSON.parse(obj);
     if(obj.type===1){
     users.push({
     nickname: obj.nickname,
     uid: obj.uid
     });
     boardcast({
     type: 1,
     date: getDate(),
     msg: obj.nickname+'加入聊天室',
     users: users,
     uid: obj.uid,
     nickname: obj.nickname
     });
     } else {
     boardcast({
     type: 2,
     date: getDate(),
     msg: obj.msg,
     uid: obj.uid,
     nickname: obj.nickname
     });
     }
     })
     conn.on("close", function (code, reason) {
     console.log("关闭连接")
     });
     conn.on("error", function (code, reason) {
     console.log("异常关闭")
     });
    }).listen(8001)
    console.log("WebSocket建立完毕")
    

    这里和《 WebSocket简绍- 第一章》大体结构相同,不同的是,这里向客户端发送消息是用的一个方法

    server.connections.forEach(function(conn) {
     conn.sendText(JSON.stringify(obj));
    })
    

    遍历所有连接,发送信息。

    这里为什么要JSON.stringify(obj)转换成字符串???

    那是sendText方法只能传入字符串,所以我们需要将我们的对象转换一下。

    同时,大家应该可以看出,在conn.on("text", ()=>{})的时候判断了一个从客户端传入的type,这个操作是判断用户是否是第一次进入。

    WebSocket客户端视图层

    <div id="app">
     <c-dialog
     ref="loginDialog"
     title='请输入你的昵称'
     confirmBtn="开始聊天"
     @confirm="login"
     >
     <input class="nickname" v-model="nickname" type="text" placeholder="请输入你的昵称">
     </c-dialog>
    
     <div class="web-im">
     <div class="header im-title">聊天室</div>
     <div class="content im-record">
     <div class="li" :class="{user: item.uid == uid}" v-for="item in messageList">
     <template v-if="item.type===1">
     <p class="join-tips">{{item.msg}}</p>
     </template>
     <template v-else>
     <div class="img">{{item.nickname}}</div>
     <p class="message-box">{{item.msg}}</p>
     </template>
     </div>
     </div>
     <div class="footer im-input">
     <input type="text" v-model="msg" placeholder="请输入内容">
     <button @click="send">发送</button>
     </div>
     </div>
    </div>
    

    在这里插入图片描述
    样式方面就不做解释了,都是非常简单的样式,有兴趣的可以点击最下方获取源码查看。

    WebSocket客户端

    export default {
     data(){
     return {
     uid: '',
     nickname: '',
     socket: '',
     msg: '',
     messageList: []
     }
     },
     mounted() {
     let vm = this;
     let user = localStorage.getItem('WEB_IM_USER');
     user = user && JSON.parse(user) || {};
     vm.uid = user.uid;
     vm.nickname = user.nickname;
    
     if(!vm.uid){
     vm.$refs.loginDialog.show()
     } else {
     vm.conWebSocket();
     }
     document.onkeydown = function (event) {
     var e = event || window.event;
     if (e && e.keyCode == 13) { //回车键的键值为13
     vm.send()
     }
     }
     },
     methods: {
     send(){
     if(!this.msg){
     return
     }
     this.sendMessage(2, this.msg)
     },
     sendMessage(type, msg){
     this.socket.send(JSON.stringify({
     uid: this.uid,
     type: type,
     nickname: this.nickname,
     msg: msg
     }));
     this.msg = '';
     },
     conWebSocket(){
     let vm = this;
     if(window.WebSocket){
     vm.socket = new WebSocket('ws://localhost:8001');
     let socket = vm.socket;
    
     socket.onopen = function(e){
     console.log("连接服务器成功");
     if(!vm.uid){
     // 生成新的用户id,并存入localStorage
     vm.uid = 'web_im_' + moment().valueOf();
     localStorage.setItem('WEB_IM_USER', JSON.stringify({
     uid: vm.uid,
     nickname: vm.nickname
     }))
     vm.sendMessage(1)
     }
     }
     socket.onclose = function(e){
     console.log("服务器关闭");
     }
     socket.onerror = function(){
     console.log("连接出错");
     }
     // 接收服务器的消息
     socket.onmessage = function(e){
     let message = JSON.parse(e.data);
     vm.messageList.push(message);
     } 
     }
     },
     login(){
     this.$refs.loginDialog.hide()
     this.conWebSocket();
     }
     }
    }
    

    页面渲染完成后,我们localStorage.getItem(‘WEB_IM_USER’)获取本地存储是否有用户信息

    1、没有用户信息,弹框填写昵称,确认开始连接,并生成一个时间戳的用户id,存入localStorage

    2、有用户信息,直接连接

    3、socket.onmessage监听服务器发送过来的消息,转换成json,push到messageList数组中,然后渲染到页面

    4、通过type判断是新加入用户,还是正常发送消息,显示到页面

    5、通过uid,判断是否是本人发送的消息,如果是消息内容靠右显示,其他用户发送的消息都靠左显示,并设置不同背景色

    这样我们就完成了一个简单的node + websocket群聊功能,你从中学习到了什么了???

    最后来一睹风采
    在这里插入图片描述

    总结

    Nodejs + WebSocket群聊功能和核心不知道大家有没有get到了??? 其实核心代码就是它:

    function boardcast(obj) {
     server.connections.forEach(function(conn) {
     conn.sendText(JSON.stringify(obj));
     })
    }
    

    备注:本文由 web秀 作者:Javan 发表

    展开全文
  • Vue 封装WebSocket+检测心跳+客服

    千次阅读 2020-07-02 18:12:38
    1. 创建socket.js类 import store from '@/store/index.js'; ... // webScoket let websock = {}; //建立的连接 let lockReconnect = false; //是否真正建立连接 let timeout = 60 * 1000; // 1分钟一次心跳 ...

    1. 创建socket.js类

    import store from '@/store/index.js';
    import API from '@/api/http.js';
    // webScoket
    let websock = {}; //建立的连接
    let lockReconnect = false; //是否真正建立连接
    let timeout = 60 * 1000; // 1分钟一次心跳
    let timeoutObj = null; //心跳心跳倒计时
    let serverTimeoutObj = null; //心跳倒计时
    let timeoutnum = null; //断开 重连倒计时
    
    // 一进入就加载
    initWebSocket();
    
    // 初始化weosocket
    function initWebSocket() {
      let user = localStorage.getItem('user');
      if (user !== '' && user !== undefined) { // 在用户未登录的情况下不进行连接
        // 建立连接
        websock = new WebSocket ('你的webSocket地址');
        // 连接成功
        websock.onopen = websocketonopen;
        // 连接错误
        websock.onerror = websocketonerror;
        // 连接关闭
        websock.onclose = websocketclose;
        // 接收信息
        websock.onmessage = websocketonmessage;
      } else {
        //清除时间
        clearTimeout(timeoutObj);
        clearTimeout(serverTimeoutObj);
      }
    }
    
    // 重新连接
    function reconnect() {
      if (lockReconnect) {
        return;
      }
      lockReconnect = true;
      // 没连接上会一直重连,设置延迟避免请求过多
      timeoutnum && clearTimeout(timeoutnum);
      timeoutnum = setTimeout(function() {
        // 新连接
        initWebSocket();
        lockReconnect = false;
      }, 5000);
    }
    
    //重置心跳
    function reset() {
      //清除时间
      clearTimeout(timeoutObj);
      clearTimeout(serverTimeoutObj);
      //重启心跳
      let user = localStorage.getItem('qrtMallUser');
      if (!meetNull(user)) {
        console.log('退出了登录,不需要重连');
        return;
      }
      start();
    }
    
    //开启心跳
    function start() {
      timeoutObj && clearTimeout(timeoutObj);
      serverTimeoutObj && clearTimeout(serverTimeoutObj);
      timeoutObj = setTimeout(() => {
        //这里发送一个心跳,后端收到后,返回一个心跳消息,
        if (websock.readyState == 1) {
          //如果连接正常
          websock.send("heartCheck");
        } else {
          //否则重连
          reconnect();
        }
        serverTimeoutObj = setTimeout(() => {
          //超时关闭
          websock.close();
        }, timeout);
      }, timeout);
    }
    
    //连接成功事件
    function websocketonopen() {
      //开启心跳
      start();
    }
    
    //连接失败事件
    function websocketonerror(e) {
      //错误
      //重连
      lockReconnect = false;
      reconnect();
    }
    
    //连接关闭事件
    function websocketclose(e) {
      //关闭
      console.log("connection closed ");
      //提示关闭
      //重连
      reconnect();
    }
    
    function websocketsend(msg) {
      //向服务器发送信息
      //数据发送
      if (websock.readyState == 1) {
        websock.send(msg);
      } else {
        websock.close();
        initWebSocket();
      }
    }
    
    // 接收服务器返回的数据
    function websocketonmessage(e) {
      let resData = JSON.parse(e.data);
      // 获取当前在哪个路由,可以在路由文件存储如:router.beforeEach((to, from, next) => {essionStorage.setItem('url', to.fullPath);});
      let toUrl = sessionStorage.getItem('url');
      if (resData.type == "init") {
        // 请求接口绑定用户到后端(API是我封装的axios请求)
        let para = {client_id: resData.client_id };
        API.post("service/bind", para, 1).then(res => {
          if (res.status == 1) {
            store.commit('changeSocketLocal', websock);
          }
        });
      } else if (resData.type == "msg_add") {
        if ( toUrl == '/chat') {
          // 正在聊天界面
          store.commit('changeServiceInfosLocal', resData); // 把消息保存到Vuex中
        } else { // 不在聊天界面中
       	  eventStorage(); // 用于消息声音提醒
          // 设置未读条数
          let onReadMsgNum = localStorage.getItem("noReadNum"); // 把原有未读的条数一起累加
          ++onReadMsgNum;
          localStorage.setItem("noReadNum", onReadMsgNum);
          store.commit('changeNoMsgReadNumLocal', onReadMsgNum); // 把未读的条数保存到Vuex中,解决有新消息页面未刷新不能及时更新的问题
        }
      }
      // 收到服务器信息,心跳重置
      reset();
    }
    function eventStorage () {
      // 监听storage的变化, 用于消息声音提醒
      var orignalSetItem = localStorage.setItem;
      localStorage.setItem = function(key,newValue){
       var setItemEvent = new Event("setItemEvent");
        setItemEvent.newValue = newValue;
        window.dispatchEvent(setItemEvent);
        orignalSetItem.apply(this ,arguments);
      }
    }
    
    export {
      // 暴露出去,方便调用
      initWebSocket
    }
    

    2.进入系统开启websocket, 在main.js引入

    import * as socket from '@/assets/js/socket.js'
    Vue.prototype.$SOCKET = socket;
    

    3.回显webSocket的数据

    <template>
      <div class="cgh-view">{{dataList}}</div>
    </template>
    <script>
    import { mapMutations, mapState } from 'vuex';
    export default {
      data() {
        return {
          webSocket: {readyState: 0},
          dataList: []
        };
      },
      created() {
        localStorage.removeItem('noReadNum'); // 移除未读消息
        document.body.removeEventListener('setItemEvent', function (event) {
            event.preventDefault();  // 移除对storage的监听
        },false);
        this.changeNoMsgReadNumLocal(0); // 未读数清零
      },
      computed: {
        ...mapState(['serviceInfosLocal', 'socketLocal'])
      },
       watch: {
        serviceInfosLocal  (newVal, oldval) { // 获取客服发送的消息
          this._getHttpMsgInfo(newVal.data);
        },
        socketLocal (newVal) { // 保存的webSoket对象, 用于获取连接状态
          this.webSocket = newVal;
        },
      },
      methods: {
        ...mapMutations(['changeNoMsgReadNumLocal']),
        _getHttpMsgInfo (resData) {    // 接收到服务器消息
          let toUrl = sessionStorage.getItem('url');
          if (toUrl.includes('chat')) {
            // 在聊天界面,直接把消息push到数据里,用于界面回显
            this.dataList.push(resData);
          }
          // 向服务器发送数据
          if (this.webSocket !== undefined && this.webSocket.readyState == 1) {
            this.webSocket.send(resData);
          }
        },
      },
    };
    </script>
    

    3.显示未读条数

    <template>
      <div class="cgh-tab-view">
        <div class="cgh-msg-msg-on-read" >{{readNum}}</div>
      </div>
    </template>
    <script>
    import { mapState } from "vuex";
    export default {
      data() {
        return {
          readNum: "",
        };
      },
      computed: {
        ...mapState(["noMsgReadNumLocal"])
      },
      created() {
        let val = localStorage.getItem('noReadNum');
        this.getNoReadMsg(val);
      },
      watch: {
        noMsgReadNumLocal: { // 监听Vuex noMsgReadNumLocal数据的变化
          handler: function(val, oldval) {
            this.getNoReadMsg(val);
          }
        }
      },
      methods: {
        getNoReadMsg(val) {
          // 获取未读条数
          if (val !== '') {
            this.readNum = "";
          } else {
            if (Number(val) > 99) {
              this.readNum = "99+";
            } else {
              this.readNum = val;
            }
          }
        }
      },
    };
    </script>
    

    4.新消息声音提醒
    在index.html写入:

      <body>
        <audio style="display:none;"  id='MsgaudioTs'>
          <source src="msg.mp3" />
       </audio>
      </body>
      <script>
        // 客服新信息声音提醒
         window.addEventListener("setItemEvent", function (e) {
           if (localStorage.getItem('noReadNum')) {
            var elem = document.getElementById('MsgaudioTs');
            //播放
            if (elem.paused) {
                elem.play();
            }
           }
        });
      </script>
    
    展开全文
  • vue中使用websocket通信接收后台数据

    千次阅读 热门讨论 2019-08-20 16:52:45
    前言: 项目中因为有的数据使用分页后数据加载还是很慢,所以考虑使用websocket来解决。后端获取到数据库数据后就依次返回给前端,这样就不需要等分页数据全部获取后才返回。 1、需求概述 点击按钮后才开启...

    前言:

    项目中因为有的数据使用分页后数据加载还是很慢,所以考虑使用websocket来解决。后端获取到数据库数据后就依次返回给前端,这样就不需要等分页数据全部获取后才返回。

    websocket封装请看我的另一篇博文:(这个扩展性和可维护性好一些)
    封装websocket请求-----vue项目实战(完整版)

    1、需求概述

    点击按钮后才开启websocket连接,然后发送数据给后端(相当于post请求中也是需要传递数据给后端使用),在websocket实例对象的onmessage 函数中能获取到后端返回的数据进行处理渲染。

    2、代码

    export default {
    	data() {
    		return {
    			websock: null
    		}
    	},
    	destroyed () {
    	    //页面销毁时关闭ws连接
    	    if(this.websock){
    	    	this.websock.close() // 关闭websocket
    	    } 
      	},
     	methods: {
    	    //初始化weosocket
    	    initWebSocket(){
    	      if(typeof(WebSocket) === "undefined"){
    	        alert("您的浏览器不支持WebSocket")
    	        return false
    	      }
    	      const wsuri = 'ws://*.*.*.*:8081/dns-monitor' // websocket地址
    	      this.websock = new WebSocket(wsuri)
    	      this.websock.onopen = this.websocketonopen
    	      this.websock.onmessage = this.websocketonmessage
    	      this.websock.onerror = this.websocketonerror
    	      this.websock.onclose = this.websocketclose
    	    },
    	    //连接成功
    	    websocketonopen(){ 
    	      console.log('WebSocket连接成功')
    	    },
    	    //接收后端返回的数据
    	    websocketonmessage(e){ 
    	      let dataJson = JSON.parse(e.data)
    	      console.log(dataJson)
    	      // 在这里使用后端返回的数据,对数据进行处理渲染
    	    },
    	    //连接建立失败重连
    	    websocketonerror(e){
    	      console.log(`连接失败的信息:`, e)
    	      this.initWebSocket() // 连接失败后尝试重新连接
    	    },
    	    //关闭连接
    	    websocketclose(e){ 
    	      console.log('断开连接',e)
    	    },
    	    // 点击按钮
    	  	btnClick () {
    	  	    // 因为需求是每次点击都是发起不同ws连接,拿到的数据也不一致,所以连接前要先断开上次的连接
    	  		if(this.websock){
    	       		this.websock.close() // 关闭websocket连接
    	      	}      
    	        this.initWebSocket() // 初始化weosocket,发起连接
    	        // 这里使用定时器是为了等待连接后才发送数据,避免错误
    	        setTimeout( () => { 
    	           //添加状态判断,当为OPEN时,前端发送消息给后端
    	           if (this.websock.readyState === 1) {
    	           		// 把后台需要的参数数据传过去
    	               let obj = {
    		               jobId: 111,
    		               token: 'xxxxx',
    		               message: 'send ok'
    	              }
    	         	 //发给后端的数据需要字符串化
    	         	 this.websock.send(JSON.stringify(obj))
    	       		 }
    	      	}, 500)
    	  	}
    	  }
    }
    

    websocket接口数据接收示意图:
    在这里插入图片描述

    3、websocket的几个状态

    websocket的几个状态。通常在实例化一个websocket对象之后,客户端就会与服务器进行连接。但是连接的状态是不确定的,于是用readyState属性来进行标识。它有四个值,分别对应不同的状态:

    CONNECTING:值为0,表示正在连接;
    OPEN:值为1,表示连接成功,可以通信了;
    CLOSING:值为2,表示连接正在关闭;
    CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
    

    展开全文
  • vue中使用websocket实践

    2020-10-27 18:28:33
    问题描述:最近有项目涉及到前后端websocket通信,在封装好了websocket相关的方法后,需要在onmessage里面拿到后端的返回信息。也看了网上很多实例,大部分都是直接在.vue文件里面去初始化websocket,考虑到自己项目...
  • vue 如何使用websocket

    万次阅读 多人点赞 2017-09-22 13:49:44
    vue 如何使用websocket
  • vue中发送websocket连接

    2020-04-07 11:09:55
    <template> <div class="test"> </div> </template> <script> export default { name : 'test', data() { return { websock: null, } }, ...
  • vue中开发webSocket

    2019-09-22 03:55:59
    先安装 sockjs-client 和 stompjs npm install sockjs-client npm install stompjs <template> <div> <el-row :gutter="5"> <div class="head">WebSocket接收后端数据<... ...
  • if request.is_websocket(): msg = 23 request.webscoket.send(str(msg)) # send(必须是字符串) urls.py 里添加对应uri或者api Vue npm install -S vue-websocket 根目录下的main.js import VueWebsocket from...
  • 前端vue + websocket 的坑

    千次阅读 2020-06-06 15:29:54
    vue + websocket 的坑 记录一下在开发过程中的坑,不封装,没有插件,不使用vuex,纯小白写法(我就是小白本人) 本内容分为自己搭的测试环境和后端对接两个部分 因为一些原因,要保持与服务端的同步,然后使用了...
  • vue中webscoket 主动断开连接

    千次阅读 2018-12-12 14:11:34
    我们经常碰到这个需求 在客户端退出的时候 需要断开webscoket webscoket里面提供了一个方法 webscoket.onclose 这里是无法直接清除webscoket对象 必须使用onclose方法...
  • websocket入门

    2018-12-19 16:03:00
    Vue.use(VueWebsocket,"ws://127.0.0.1:5000/testnamespace" ) 10 11 12 13 export default { 14 15 methods: { 16 add() { 17 // Emit the server side 18 this .$socket.emit(...
  • WebSocket入门

    2019-09-20 15:53:25
    Vue.use(VueWebsocket, "ws://otherserver:8080", { reconnection: false }); export default { methods: { add() { // Emit the server side this.$socket.emit("add", { a: 5, b: 3 }); }, get() {...
  • 主要介绍了springboot+vue实现websocket配置过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 基于vue,websocket实现在线聊天功能

    万次阅读 2018-04-15 18:15:05
    最近项目中一直在使用vue作为前端框架,可是用到的只有很少一部分的功能,特别是vuex,为了更加深入了解vue框架,在工作之余开发了一款基于vue的在线聊天工具,一下是部分功能效果图1....添加好友&...
  • 初始化WebSocket以及其他可能用到的方法 //初始化WebSocket initWs() { if(typeOf(WebSocket) === "undefined") { //浏览器不支持WebSocket return false } else { this.socket = new WebSocket() //括号中填写...
  • vue中封装webSocket

    万次阅读 多人点赞 2018-08-22 12:07:16
    在vue项目中,每个组件里使用webSocket比较简单,但是webSocket的使用是在整个项目中的时候呢, 我们就需要封装成一个公共的文件; 1.新建一个 socket.js 文件 var websock = null; var global_callback = null;...
  • VUE WebSocket

    2020-08-24 11:44:39
    <script> ... export default { mounted() { this.socket(); }, methods: { ... * 与GatewayWorker建立websocket连接,域名和端口改为你实际的域名端口, * 其中端口为Gateway端口,即start_gat
  • vue中使用websocket

    2019-04-09 16:43:00
    Springboot: MyWebsocket.java package com.oppo.tcms.socket; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.On...impor...
  • 首先我们保证已经安装了nodejs 先上一张效果图 建一个文件夹 ws_nodeserver,在里面建一个server.js ,然后在ws_websocket文件夹下执行 npm init 一直敲回车 生成package.json文件。 ...下载我们引用的依赖 cnpm ...
  • vue-websocket使用方法?

    2017-09-15 04:33:33
    vue-websocket在vue+webpack搭建的项目里如何使用?求大神解决一下
  • 为您提供vue websocket聊天源码下载,基于WebSocket实现的vue websocket聊天,支持一对一聊天,功能包含登录页面、对话界面、好友列表、上下线提醒等。 websocket服务采用的国内知名的第三方websocket框架【GoEasy】...
  • vue websocket聊天源码

    2020-05-14 14:42:50
    基于WebSocket实现的vue websocket聊天,支持一对一聊天,功能包含登录页面、对话界面、好友列表、上下线提醒等。 websocket服务采用的国内知名的第三方websocket框架【GoEasy】实现。 源代码精炼,层次清晰,非常...
  • VueWebsocket from 'vue-websocket' Vue . use ( VueWebsocket ) ; 页面里 data ( ) { return { Value : '' , } } , methods : { initWebSocket ( ) { this . ...
  • vue websocket 请求

    千次阅读 2019-07-11 10:29:00
    首先写一个公共方法 socket.js function getSocket(url, params, callback) { let socket; if (typeof (WebSocket) === 'undefined') { console.log('您的浏览器不支持WebSocket');... } el...
  • 一、首先:需求就是:vue tab数据是查询接口 + websocket 里面的 (socket数据是实时更新) 先效果图:(状态和时间,是实时更新的) 1.左边是树结构 2.右边是tab'列表 : ...①:tab列表是2部分组成, ...
  • 由于项目要进行H.264裸流播放,在github上找到了可用的[wfs.js](https://github.com/ChihChengYang/wfs.js "wfs.js"),最近又遇到了一个问题,无法调用wfs.js内部Websocket初始化和关闭的函数。 ...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

vuewebsocket

vue 订阅