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 相关文章推荐
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
详解Angular路由之路由守卫
May 10 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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文本操作类
2006/11/25 PHP
php使用session二维数组实例
2014/11/06 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
js+css实现扇形导航效果
2020/08/18 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python求解汉诺塔游戏
2020/07/09 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
远程调用的原理
2014/07/05 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
社区健康教育工作方案
2014/06/03 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang