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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 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中的strpos使用示例
2014/02/27 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js图片预加载示例
2014/04/30 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
如何用python免费看美剧
2020/08/11 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
软件测试笔试题
2012/10/25 面试题
三下乡活动方案
2014/01/31 职场文书
安全检查管理制度
2014/02/02 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
给校长的建议书100字
2014/05/16 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server