socket io与vue-cli的结合使用的示例代码


Posted in Javascript onNovember 01, 2018

关于在vue中使用websocket的简易例子

使用vue-cli生成一个vue模版

安装三个依赖:

npm install -s socket.io
npm install -s vue-socket.io
npm install -s socket.io-client

创建一个新的servers:在文件最外层创建 server/app.js文件:

var sever=require('http').createServer();
var io=require('socket.io')(sever)

io.on('connection', function (socket) {
  socket.on('login',function(data){ //接收连接中的login事件
    console.log(data);
    io.emit('loginmsg','你发过来的数据是:'+data) //发送回去 事件名为loginmsg
   })

})
console.log('socket端口:8000');
sever.listen(8000)

在package.js文件中添加启动脚本:

script{ "server": "node sever/app.js"}

在mian.js中vue.use():

import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio, socketio('ws://127.0.0.1:8000'));//与websocket服务端链接

在.vue文件中:

<template>
  <div>
    <div> 
      <input type="text" v-model="msg">
      <button @click='Login'>向8000端口发送数据</button>
      {{backdata}}
    </div>

  </div>
</template>
<script>
export default{
  data:function (){
    return {
      msg:"aaaa",
      backdata:'',
    }
  },
  sockets:{ //在此接收又服务器发送过来的数据 ps:注意此处的方法名要与服务器的发送的事件保持一致才能接收到
   connect:function() {      //与ws:127.0.0.1:8000连接后回调
    console.log('连接成功');
   },
   loginmsg:function(value) {
    console.log(value);//监听login(后端向前端emit login的回调)
    this.backdata=value;
   }
  },
  methods:{
    Login(){
      this.$socket.emit('login',this.msg);
    }
  }
   
 }
</script>

先启动8000端口 npm run server

然后打开新的命令行 npm run dev 启动vue模版

socket io与vue-cli的结合使用的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
详解vuex状态管理模式
Nov 01 #Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
You might like
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
angular 服务随记小结
2019/05/06 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python实现二叉堆
2016/02/03 Python
python能做哪方面的工作
2020/06/15 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
模具毕业生推荐信
2014/02/15 职场文书
银行职员自我鉴定
2014/04/20 职场文书
临床专业自荐信
2014/06/22 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
七一建党节演讲稿
2014/09/11 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
企业党建工作总结2015
2015/05/26 职场文书
签字仪式主持词
2015/07/03 职场文书
小学体育组工作总结
2015/08/13 职场文书
创业计划书详解
2019/07/19 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫