socket io与vue-cli的结合使用的示例代码

关于在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模版

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue与Node.js通过socket.io通信的示例代码

    一.Node中socket.io基础 1.是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询 JSONP轮询 Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2.怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require('http') var s

  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行

  • vue + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • Vue Socket.io源码解读

    Vue Socket.io源码解读

    背景 有一个项目,今年12月份开始重构,项目涉及到了socket.但是socket用的是以前一个开发人员封装的包(这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子).因此,趁着这个重构的机会,将vue-socket.io引入,后端就用socket.io.我也好奇看了看vue-socket.io的源码(我不会说是因为这个库的文档实在太简略了,我为了稳点去看源码了解该怎么用) 开始 文件架构 我们主要看src下的三个文件,可以看出该库是用了观察者模式 Main.js // 这里创建一个obser

  • Vue cli+mui 区域滚动的实例代码

    vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • Vue+Springboot实现接口签名的示例代码

    Vue+Springboot实现接口签名的示例代码

    1.实现思路 接口签名目的是为了,确保请求参数不会被篡改,请求的数据是否已超时,数据是否重复提交等. 接口签名示意图 客户端提交请求时,将以下参数按照约定签名方式进行签名,随后将参数和签名一同提交服务端: 1.请求头部分(header) appid:针对不同的调用方分配不同的appid. noce:请求的流水号,防止重复提交. timestamp:请求时间戳,验证请求是否已超时失效. 2.数据部分 Path:按照path中的参数将所有key=value进行拼接. Query:按照所有key=va

  • vue语法之拼接字符串的示例代码

    vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • 用ES6的class模仿Vue写一个双向绑定的示例代码

    用ES6的class模仿Vue写一个双向绑定的示例代码

    本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com

  • Vue 实现展开折叠效果的示例代码

    Vue 实现展开折叠效果的示例代码

    本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc

  • C# Socket编程实现简单的局域网聊天器的示例代码

    前言 最近在学习C# Socket相关的知识,学习之余,动手做了一个简单的局域网聊天器.有萌生做这个的想法,主要是由于之前家里两台电脑之间想要传输文件十分麻烦,需要借助QQ,微信或者其他第三方应用,基本都要登录,而且可能传输的文件还有大小限制,压缩问题.所以本聊天器的首要目标就是解决这两个问题,做到使用方便(双击启动即用),传文件无限制. 废话不多说,先上图.S-Chat是服务端,C-Chat是客户端,两者除了客户端首次启动后需要设置一下连接的IP地址外,无其他区别.操作与界面都完全相同,对于用

  • vue制作抓娃娃机的示例代码

    去年为联通制作双十一活动,做四个小游戏:'配对消消乐'.移动拼图.抓娃娃.倒计时. 现在先做来分享一下制作抓娃娃游戏时的经验 先上效果图 游戏规则:在指定时间内抓到上图四张卡片为挑战成功. 现在直接说游戏主要内容:娃娃滚动.爪子向下抓取.抓到卡片 废话不多说直接上代码!(此样式是根据需求而定) <!--布局样式--> <div class="game"> <!--爪子--> <div class="paw"> <

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

随机推荐