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学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
linux iconv方法的使用
2011/10/01 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
一个网马的tips实现分析
2010/11/28 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
python 安装移动复制第三方库操作
2020/07/13 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
database面试题
2013/03/28 面试题
两年的个人工作自我评价
2014/01/10 职场文书
行政助理工作职责范本
2014/03/04 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
小学教师师德承诺书
2014/05/23 职场文书
选秀节目策划方案
2014/06/06 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
销售工作决心书
2015/02/04 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
爱护公物主题班会
2015/08/17 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书