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 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 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安装threads多线程扩展基础教程
2015/11/17 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
python开发利器之ulipad的使用实践
2017/03/16 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
全民健身日活动方案
2014/01/29 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
作文批改评语大全
2014/04/23 职场文书
社团活动总结模板
2014/06/30 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
家属慰问信
2015/02/14 职场文书
酒店辞职书范文
2015/02/26 职场文书
台风停课通知
2015/04/24 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
创业计划书之家教中心
2019/09/25 职场文书