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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
几种响应式文字详解
May 19 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 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
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python yield使用方法示例
2013/12/04 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
详解Python Socket网络编程
2016/01/05 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
详解flask表单提交的两种方式
2018/07/21 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python 图片处理库exifread详解
2021/02/25 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
大专会计自我鉴定
2014/02/06 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
专项法律服务方案
2014/06/11 职场文书
教师节祝酒词
2015/08/11 职场文书