187.Vue.js智能扫码点餐系统（二十一）【Vue-Socket.io+Koa实现无刷新同步购物车数据 、无刷新同步购物车数量、Ngix】2019.03.26

0、知识点

• Vue socket.io安装及使用
• 全部广播，广播给所有人
• 下次做成同一桌人的数据广播
• Ngix

1、vue-socket.io的安装、使用步骤

• 安装npm install vue-socket.io --save
• main.js 引入 并且use

 import VueSocketio from 'vue-socket.io';
  Vue.use(VueSocketio, 'http://a.itying.com');

• vue实例里面定义sockets，sockets里面的方法表示接收到服务器的消息以后触发

sockets:{
      connect: function(){
        console.log('socket connected')
      },
      customEmit: function(val){
        console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
      }
    }

• 给服务器发数据

this.$socket.emit('emit_method', val);

• main.js

import Vue from 'vue'
import App from './App.vue'

//请求数据配置
import VueResource from 'vue-resource';
Vue.use(VueResource);


import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio, 'http://a.itying.com?roomid=a002');

*/




//引入路由  use路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1、创建引入组件

import Start from './components/Start.vue';
import Home from './components/Home.vue';
import Hot from './components/Hot.vue';
import Order from './components/Order.vue';
import Pcontent from './components/Pcontent.vue';
import Search from './components/Search.vue';
import Cart from './components/Cart.vue';
import EditPeopleInfo from './components/EditPeopleInfo.vue';

//2、配置路由

const routes = [
  { path: '/start', component: Start },
  { path: '/home', component: Home },
  { path: '/hot', component: Hot },
  { path: '/order', component: Order },
  { path: '/pcontent', component: Pcontent },
  { path: '/search', component: Search },
  { path: '/cart', component: Cart },
  { path: '/editpeopleinfo', component: EditPeopleInfo },
  { path: '*', redirect: '/start' }
]


//3、实例化VueRouter

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes  属性的简写
})



//4、挂载


new Vue({
  el: '#app',
  router,
  sockets:{  /*测试期间写 也不不写在根里面*/
    connect: function(){
      console.log('socket connected')
    }
    
  },

  render: h => h(App)
})


//5、需要 <router-view></router-view>  放在根组件里面

  

2、socket.js

• 服务器代码

/**
 * Created by Administrator on 2019/4/01 0019.
 */
const IO = require( 'koa-socket' );
const url=require('url');
const io = new IO();

var socketIo={


    init:function(app) {
        io.attach(app);
        /*注册启动*/

        app._io.on('connection', socket => {

            console.log('连接成功');
            var requestUrl = socket.request.url;
            var roomid = url.parse(requestUrl, true).query.roomid; // 获取房间ID


		    socket.join(roomid);
            //加入购物车
            socket.on('addcart', function (data) {

                console.log('addcart');
                //用户加入房间
                //socket.emit('addcart',data);
                //app._io.emit('addcart',data);   /*广播数据*/
                //对房间内的用户发送消息
                //  app._io.to(roomid).emit('addcart','有人加入购物车了');//包括自己
                socket.broadcast.to(roomid).emit('addcart', 'addcart');//不包括自己
            });

        })
    }



}


module.exports=socketIo;

3、Home.vue

• 购物车监听来自服务器的广播
• 代码

<script>
 sockets:{   
            addcart: function(){  /*接受服务器广播过来的addcart*/
                //更新购物车的数量
                this.getCartCount();
            }            
        }
 </script>      

4、Cart.vue

• 购物车监听来自服务器的广播，并实现无刷新同步购物车数据
• 代码实现

<script>  
sockets:{   
            addcart: function(){  /*接受服务器广播过来的addcart*/
                //更新购物车的数据
                this.getCartData();
            }            
        }







					decNum(item,key){


                    //请求远程服务器执行更新操作
                    //桌子id  桌子号：是扫描二维码从url获取的
                    var product_id=item.product_id;
                    var num=item.num;
                    var api=this.api+'api/decCart?uid=a001&product_id='+product_id+'&num='+num;

                    this.$http.get(api).then((response)=>{



                        **//修改购物车数据的时候给服务器发消息**
                        this.$socket.emit('addcart','addcart');

                     
					   this.getTotalResult();
                    },(error)=>{
                        console.log(error);
                    })


</script>  

• 效果截图
  

5、ngix

• 当用户向服务器发送请求时，会首先通过ngix负载均衡进行转发数据请求到koa，达到减轻服务器压力的作用