使用goEasy实现多对多实时点餐程序
- 新建一个uniapp项目，引入goEasy插件
npm install goeasy@2.6.2 --save
- 在main.js引入goeasy并注册
import App from './App' import GoEasy from 'goeasy' // #ifndef VUE3 import Vue from 'vue' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() // #endif Vue.prototype.GoEasy = GoEasy let goeasy = GoEasy.getInstance({ host:"hangzhou.goeasy.io", //若是新加坡区域：singapore.goeasy.io appkey:"BC-e1f69be1cd6e409f944f3e1285c257c7", modules:['pubsub']//根据需要，传入‘pubsub’或'im’，或数组方式同时传入 }); Vue.prototype.goEasy = goeasy //建立连接 goeasy.connect({ id:"test_channel", //pubsub选填，im必填，最大长度60字符 // id:uni.getSystemInfoSync().deviceId, //pubsub选填，im必填，最大长度60字符 data:{"avatar":"/www/xxx.png","nickname":"Neo"}, //必须是一个对象，pubsub选填，im必填，最大长度300字符，用于上下线提醒和查询在线用户列表时，扩展更多的属性 onSuccess: function () { //连接成功 console.log("GoEasy connect successfully.") //连接成功 }, onFailed: function (error) { //连接失败 console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content); }, onProgress:function(attempts) { //连接或自动重连中 console.log("GoEasy is connecting", attempts); } });
- 编写模板页面
<template> <view class="content"> <!-- <u-modal v-model="isModel" title="请输入用户名"> <view> <input style="padding: 20rpx;border: 1rpx solid #eee;margin: 30rpx;" v-model="userId" /> </view> </u-modal> --> <!-- 顶部 --> <view class="top-view"> <view>{{number_people}}人就餐</view> <view class="top-view-flex"> <image src="/static/tab/fenxiang.svg" mode="widthFix" class="top-search"></image> <image src="/static/tab/dingdan.svg" mode="widthFix" @click="my_order()"></image> </view> </view> <view class="order-view"> <view class="commodity"> <!-- 左 --> <view class="order-left"> <scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false"> <block v-for="(item,index) in itemize" :key="index"> <view class="itemize-text" :class="{active: index == trigger}" @click="itemIze(index,item.cid)"> <text>{{item.value}}</text> <text v-if="item.sele_quantity > 0">{{item.sele_quantity}}</text> </view> </block> </scroll-view> </view> <!-- 右 --> <view class="order-right"> <scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" :scroll-into-view="scroll_into" @scroll="scroLl"> <block v-for="(item,index) in goods" :key="index"> <view :id="item.cid" class="rig-height"> <view class="classif">{{item.category}}</view> <view class="classif-goods" v-for="(itemgood,good_index) in item.good_query" :key="good_index" @click="popup_item(true,index,good_index,item.cid,itemgood)"> <view class="goods-image"> <image :src="itemgood.image[0].url" mode="aspectFill"></image> </view> <view class="goods-Price"> <view class="goods-name"> <text class="Bold">{{itemgood.name}}</text> <text class="Thinning">已售 {{itemgood.monthlysale}}</text> </view> <view class="unit-price"> <text class="Symbol">¥</text> <text class="Bold">{{itemgood.unitprice}}</text> <text class="Thinning">/{{itemgood.unit}}</text> </view> </view> <!-- 无规格 --> <view class="quantity" v-if="!itemgood.att_hide"> <view> <image v-if="itemgood.quantity > 0" src="/static/tab/jianhao.png" mode="widthFix" @click.stop="channel('reduce',[index,good_index,item.cid,itemgood])"></image> </view> <view><text v-if="itemgood.quantity > 0">{{itemgood.quantity}}</text></view> <view> <image src="/static/tab/jia.png" mode="widthFix" @click.stop="channel('plus',[index,good_index,item.cid,itemgood])"></image> </view> </view> <!-- 有规格 --> <view class="quantity specs-view" v-if="itemgood.att_hide"> <text>选规格</text> <text v-if="itemgood.quantity > 0">{{itemgood.quantity}}</text> </view> </view> </view> </block> <view style="height: 400rpx;"></view> </scroll-view> </view> </view> <!-- 底部 --> <view class="order-bottom" @click="pop_Shopping()" :style="{'padding-bottom': Modelmes ? '68rpx' : ''}"> <view class="Shopping" style="width: 115rpx;"> <view class="Shopping-left"> <image src="/static/tab/gouwuche.png" mode="widthFix"></image> </view> <view class="Shopping-number" v-if="total_quantity > 0">{{total_quantity}}</view> </view> <view class="Shopping-title" v-if="total_quantity > 0">已点{{total_quantity}}份菜品</view> <view class="place-order" @click.stop="total_quantity == 0 ? false : true && placean_order()"> <button plain="true" open-type="getUserInfo">选好了</button> </view> </view> </view> <!-- 购物车 --> <Cart @empty_data="channel" @shopping_Cart_add_sub="channel" @close="pop_Shopping" v-if="card" :otherList="otherList" :shopping_card="shopping_card"></Cart> <!-- 引入单个商品弹出 --> <Details @reduce="channel" @plus="channel" @popup_item="popup_item" v-if="popupitem" :pro_details="pro_details"></Details> <!-- 骨架屏 --> <Home v-if="exist"></Home> <!-- <input v-model="value" placeholder="请输入您的id" /> <input v-model="valueB" placeholder="请输入您发送的id" /> --> <!-- <button @click="onload()">确定</button> --> <!-- <button @click="returnClick">发送</button> --> </view> </template>
- 订阅消息
//订阅消息 goEasy.pubsub.subscribe({ channel: "test_channel",//替换为您自己的channel onMessage: (message) => { //收到消息 let obj = JSON.parse(message.content) // obj.data[3].uid = obj.uid this[obj.fun](...obj.data) // if(this.userId !== obj.uid) { // this.otherList = obj.shopList // if(this.otherList.length <= 0) { // this.otherList = [obj.data[3]] // } // } else { // } console.log("Channel:" + message.channel + " content:" + message.content); }, onSuccess: function () { console.log("Channel订阅成功。"); }, onFailed: function (error) { console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content) } });
- 发送消息
//发送 channel(fun,data) { console.log('uni.getSystemInfoSync()-------',uni.getSystemInfoSync()) //发送 goEasy.pubsub.publish({ channel: "test_channel",//替换为您自己的channel message: JSON.stringify({ fun:fun, uid:this.userId, shopList:this.shopping_card, data:data }),//替换为您想要发送的消息内容 onSuccess:res => { console.log("消息发布成功。"); }, onFailed: function (error) { console.log("消息发送失败，错误编码："+error.code+" 错误信息："+error.content); } }) }
项目预览
git：https://gitcode.net/qq_27161847/goEasy.git
