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 相关文章推荐
百度移动版的url编码解码示例
Apr 29 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
微信小程序实现拼图小游戏
Oct 22 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php统计文章排行示例
2014/03/04 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
Yii清理缓存的方法
2016/01/06 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
详解vue express启动数据服务
2017/07/05 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
迟到检讨书1000字
2014/01/15 职场文书
无犯罪记录证明
2014/09/19 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技