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 相关文章推荐
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
js代码实现轮播图
May 04 Javascript
原生js实现拖拽移动与缩放效果
Aug 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 win下Socket方式发邮件类
2009/08/21 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python实现梯度法 python最速下降法
2020/03/24 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
法律专业个人实习自我鉴定
2013/09/23 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
品质主管岗位职责
2014/03/16 职场文书
公共场所标语
2014/06/30 职场文书
教师节班会开场白
2015/06/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript