Vue项目注入WebSocket,你所见的微信聊天不过如此

news/2024/7/4 1:46:20 标签: vue.js, websocket, 微信

微信 QQ这样平凡处于生活中的应用工具离我们距离很近,就想他们在生活中一样接近
那么我们就来看看年轻的WebSocket
首先要在node中引入

 npm install nodejs-websocket --save

之后我们在组件中调用即可

data(){
    return{
      ws:null,
    }
  },
   created () {
    this.ws = new    WebSocket("ws://localhost:8101/socketServer/customer/null")
    //建立链接后回调
    this.ws.onopen = (event)=>{
      console.log(event);
    },
    //建立链接时报错的回调
    this.ws.onerror = (event)=>{
        console.log(event)
    },
    //接收到推送数据时的回调
    this.ws.onmessage = (event)=>{
        console.log(event);
    },
    //关闭时回调
    this.ws.onclose = (event)=>{
         console.log(event);
    },
    //用于向服务端发送数据
    this.ws.send("传输数据")
  }

这样就可以建立一个简单的链接了,当然地址还是需要你的后端给你
有了灵活的时时推送技术,写出一个自己的微信还是件难事吗?


http://www.niftyadmin.cn/n/1038268.html

相关文章

Vue基础整理之路由二次封装

Vue路由的坑我可是踩了不少,那么我们就来看看小萌新的路由二次封装吧 封装路由首先我们要引入vue的路由 npm install vue-router --save之后我们创建router.js 编写代码在router.js中编写 import Vue from vue import routes from ./routes import Router from vu…

字符串处理strlen函数需要注意的一些小细节问题

首先,strlen函数的原型是 extern unsigned int strlen(char *s);在Visual C 6.0中,原型为size_t strlen(const char *string); ,其中size_t实际上是unsigned int,在VC6.0中可以看到这样的代码:typedef unsi…

Vue基础整理之前置钩子 后置钩子

其实非常简单 在router.js中加入router.beforeEach和router.afterEach 函数就好了 代码如下 import Vue from vue import routes from ./routes import Router from vue-router Vue.use(Router) const router new Router({mode: history,routes: routes })//路由前置守卫相关…

ACdream1099 分治思想+快排优化+读入优化

完整题目描述: Problem Description 一天,萌萌的妹子--瑶瑶(tsyao)很无聊,就来找你玩。可是你们都不知道玩什么。。。尴尬了一阵子,机智的瑶瑶就提议:“这样吧,你说N个整数xi,然后在随意说一个数…

Vue将HTML内容导出为 word文档 excel工作表 pdf文档等文件

最少我现在还实现不了通用的导出方法 只能将这三种文件的导出方式分别写出来 无论你想转那种都是需要FileSaver的 所以我们先导入第三方工具包 npm install xlsx file-saver --saveexcel的导出方式,就在需要导出的组件位置这样编写就好了,参考代码如下 …

关于codeforces比赛规则介绍(转载)

Codeforces 简称: cf(所以谈论cf的时候经常被误会成TX的那款游戏). 网址: codeforces.com   这是一个俄国的算法竞赛网站,由来自萨拉托夫州立大学、由Mike Mirzayanov领导的一个团队创立和维护,是一个举办比赛、做题和交流的平台.举办比赛和做题就不说了,“交流”指的是自带b…

Vue将HTML内容用打印机打印出来

首先导入第三方插件 npm install vue-print-nb --save在main.js中引入 import Print from vue-print-nb Vue.use(Print);接着就算打印的组件了 <template> <div id"printTest">打印区 </div> <button v-print"#printTest">打印…

CF578B 贪心+预处理优化+思维到位

题目描述&#xff1a; D. "Or" Gametime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputYou are given n numbers a1, a2, ..., an. You can perform at most k operations. For each operation you can mu…