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,达到减轻服务器压力的作用