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 innerHTML 改变div内容的方法
Aug 03 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 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
header()函数使用说明
2006/11/23 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Django 路由控制的实现
2019/07/17 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python使用配置文件过程详解
2019/12/28 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
部队学习十八大感言
2014/01/11 职场文书
期末自我鉴定
2014/02/02 职场文书
物流专业自荐信
2014/05/23 职场文书
项目工作说明书
2014/07/29 职场文书
优秀教师推荐材料
2014/12/16 职场文书
党校个人总结
2015/03/04 职场文书
2015个人半年总结范文
2015/03/09 职场文书
离婚律师函范本
2015/05/27 职场文书