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不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
Ionic快速安装教程
Jun 03 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
AngularJS表单验证功能
Oct 19 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
vue proxy 的优势与使用场景实现
Jun 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批量去除BOM头代码分享
2015/06/26 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP实现简单登录界面
2019/10/23 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
webpack打包js的方法
2018/03/12 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
用JS实现选项卡
2020/03/23 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
解析Python的缩进规则的使用
2019/01/16 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
小饰品店的创业计划书范文
2013/12/28 职场文书
自我鉴定怎么写
2014/01/12 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
会议通知范文
2015/04/15 职场文书