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对象弹出一个层
Mar 26 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery uaMatch源代码
Feb 14 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
深入学习JavaScript中的bom
May 27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
python基础教程之序列详解
2014/08/29 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python基础教程之while循环
2019/08/14 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
临时用工协议书范本
2014/10/29 职场文书
2014年会计工作总结
2014/11/27 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
应届生简历自我评价
2015/03/11 职场文书
民间借贷借条范本
2015/05/25 职场文书
唐山大地震观后感
2015/06/05 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
手把手教你导入Go语言第三方库
2021/08/04 Golang