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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
原生JS实现拖拽功能
Dec 16 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 无限级缓存的类的扩展
2009/03/16 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python安装后的目录在哪里
2020/06/21 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL