对接socket.io成功,添加背景音乐

master
chen 2022-07-28 18:19:08 +08:00
parent 781c4dfdc7
commit cf10515965
8 changed files with 209 additions and 96 deletions

94
App.vue
View File

@ -1,17 +1,30 @@
330606<script> <script>
// import io from '@/jsFile/socket.io.js';
// const socket = io("ws://7and5.cn:2120",{
// query: {},
// transports: [ 'websocket', 'polling' ],
// timeout: 5000,
// });
export default { export default {
globalData:{ globalData:{
projectname:'', // projectname:'', //
lat:'', // lat:'', //
lng:'' ,// lng:'' ,//
hostapi:'https://7and5.cn' // hostapi:'https://7and5.cn' ,//
// uid:1,
// socketInit:false,
// bgmMusic:null,
// ifPlayIng:false,
}, },
// show // show
onLaunch: function() { onLaunch: function() {
// this.connect();
// //
// #ifdef H5 // #ifdef H5 || APP-PLUS
// this.globalData.hostapi = 'https://7and5.cn'; this.globalData.bgmMusic = uni.createInnerAudioContext();
// this.globalData.hostapi = '/web'; // #endif
// #ifdef MP-WEIXIN
this.globalData.bgmMusic = wx.createInnerAudioContext();
// #endif // #endif
}, },
onShow: function() { onShow: function() {
@ -21,9 +34,80 @@
// GPS // GPS
this.$toolAll.tools.checkOpenGPSServiceByAndroidIOS(); this.$toolAll.tools.checkOpenGPSServiceByAndroidIOS();
} }
},
onLoad() {
}, },
onHide: function() { onHide: function() {
},
methods:{
connect() {
socket.io.reconnect();
console.log(this.uid,1234);
socket.on('connect', ()=> {
socket.emit('login', this.uid);
console.log('连接成功');
});
//线
socket.on('disconnect', ()=> {
socket.connect();//
console.log('关闭链接后重新链接');
// this.openSettings();
});
//线广
socket.on('loginout', (data)=> {
console.log("会员下线",data);
});
//线广
socket.on('login_msg', (msg)=> {
console.log("会员上线",msg);
});
//
socket.on('new_msg', (msg)=> {
console.log(msg);
this.offMusic();
uni.showToast({
title:msg
})
this.bofang();
});
},
bofang(){
this.globalData.bgmMusic.autoplay = true;//
// this.bgmMusic.loop = true;//
this.globalData.bgmMusic.src = 'http://m801.music.126.net/20220728102722/4a7c3c7692a5f0b808f03f8ab7d02bfb/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/4800358085/4a32/22b6/02f5/d96abc3bed5758b0e7172ea66aec841d.mp3';//
this.globalData.bgmMusic.volume = 1;//
this.globalData.bgmMusic.onPlay(()=>{
console.log('背景音乐播放中');
this.globalData.ifPlayIng = true;
});
},
//
offMusic(){
if(this.globalData.ifPlayIng){
this.globalData.bgmMusic.stop();
this.globalData.bgmMusic.onStop(()=>{
console.log('背景音乐停止了');
});
this.globalData.ifPlayIng = false;
}
},
// uniapp
openSettings() {
uni.getSystemInfo({
success(res) {
if(res.platform == 'ios'){
plus.runtime.openURL("app-settings://");
} else if (res.platform == 'android'){
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass("android.content.Intent");
var mIntent = new Intent('android.settings.SOUND_SETTINGS');
main.startActivity(mIntent);
}
}
});
},
} }
}; };
</script> </script>

10
jsFile/socket.io.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -13,6 +13,9 @@ Vue.component('container-subgroup',containerSubgroupTwo);//全局注册头部状
import share from './jsFile/share.js';// 全局注册分享事件 import share from './jsFile/share.js';// 全局注册分享事件
Vue.mixin(share); Vue.mixin(share);
import store from './store'
Vue.prototype.$store = store
// 常用工具 // 常用工具
import tools from '@/jsFile/tools.js'; import tools from '@/jsFile/tools.js';
Vue.prototype.$toolAll = tools; Vue.prototype.$toolAll = tools;

View File

@ -17,9 +17,7 @@
"delay" : 0 "delay" : 0
}, },
/* */ /* */
"modules" : { "modules" : {},
"Maps" : {}
},
/* */ /* */
"distribute" : { "distribute" : {
/* android */ /* android */
@ -110,5 +108,6 @@
} }
} }
} }
} },
"template" : "index.html"
} }

View File

@ -76,6 +76,7 @@
} }
this.$requst.post('/universal/api.login/login',params).then(res=>{ this.$requst.post('/universal/api.login/login',params).then(res=>{
if(res.code==1) { if(res.code==1) {
this.$store.commit('setUid',res.data.uid);
// token // token
uni.setStorageSync('token',res.data.token); uni.setStorageSync('token',res.data.token);
} else { } else {

View File

@ -62,18 +62,18 @@
return { return {
windowHeight: uni.getSystemInfoSync().windowHeight, windowHeight: uni.getSystemInfoSync().windowHeight,
ifPhone:false, ifPhone:false,
login_phone:'',// login_phone:'17366921088',//
ifCode:false, ifCode:false,
login_code:'',// login_code:'',//
ifunitName:false, ifunitName:false,
login_unitName:'',// login_unitName:'湖南争鸣光电科技有限公司',//
ifPassword:false, ifPassword:false,
login_password:'',// login_password:'123456',//
codeText:'获取验证码' ,// codeText:'获取验证码' ,//
flagCode:true ,// flagCode:true ,//
countDown:null, countDown:null,
login_type:'mobile',// account login_type:'mobile',// account
login_type_text:'账号密码' login_type_text:'账号密码',
}; };
}, },
onLoad() { onLoad() {
@ -94,6 +94,8 @@
this.$requst.post('/universal/api.login/login',params).then(res=>{ this.$requst.post('/universal/api.login/login',params).then(res=>{
if(res.code==1) { if(res.code==1) {
this.$toolAll.tools.showToast('登录成功'); this.$toolAll.tools.showToast('登录成功');
this.$store.commit('setUid',res.data.uid);
// socket
// token // token
uni.setStorageSync('token',res.data.token); uni.setStorageSync('token',res.data.token);
// (1234) // (1234)

View File

@ -29,7 +29,7 @@
<!-- 项目总数实时故障公告 --> <!-- 项目总数实时故障公告 -->
<view class="project-notice-box"> <view class="project-notice-box">
<view class="disjcac pad-sx20 bbot"> <view class="disjcac pad-sx20 bbot">
<view class="disjcac fc width50" @click="change"> <view class="disjcac fc width50">
<view class="fon26 col9">项目总数</view> <view class="fon26 col9">项目总数</view>
<view class="fon60 bold">{{project_count || 0}}</view> <view class="fon60 bold">{{project_count || 0}}</view>
</view> </view>
@ -239,20 +239,7 @@
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue'; import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue'; import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import {getPlanType} from '@/jsFile/public-api.js'; import {getPlanType} from '@/jsFile/public-api.js';
import io from '@hyoga/uni-socket.io'; import io from '@/jsFile/socket.io.js';
// const socket = io('http://7and5.cn:2120', {
// transports: [ 'websocket']
// });
// const socket = io('http://7and5.cn:2120', {
// query: {},
// transports: [ 'websocket', 'polling' ],
// timeout: 5000,
// });
var socket = io("ws://7and5.cn:2120",{
query: {},
transports: [ 'websocket', 'polling' ],
timeout: 5000,
});
export default { export default {
components:{ components:{
pitera, pitera,
@ -342,9 +329,17 @@
contactPhone:'',// contactPhone:'',//
project_count:0,// project_count:0,//
project_error_count:0,// project_error_count:0,//
uid:1, socketInit:false,
socket:null, bgmMusic:null,
socketInit:false ifPlayIng:false,
}
},
computed:{
uid() {
return this.$store.state.uid
},
ifConnect(){
return this.$store.state.ifConnect
} }
}, },
onShow() { onShow() {
@ -353,6 +348,12 @@
console.log(this.role,'角色id') console.log(this.role,'角色id')
}, },
onLoad(options) { onLoad(options) {
// #ifdef H5 || APP-PLUS
this.bgmMusic = uni.createInnerAudioContext();
// #endif
// #ifdef MP-WEIXIN
this.bgmMusic = wx.createInnerAudioContext();
// #endif
// url // url
this.$toolAll.tools.obtainUrl(); this.$toolAll.tools.obtainUrl();
// //
@ -361,78 +362,69 @@
this.getIncrementServiceType(); this.getIncrementServiceType();
// //
this.getFaultsList(); this.getFaultsList();
this.connect(); if(!this.ifConnect && this.uid){
this.connect();
}
}, },
methods: { methods: {
connect() {
if(!this.socketInit) {
this.socketInit = true;
socket.on('connect', ()=> {
socket.emit('login', this.uid);
console.log('连接成功');
});
socket.on('connect', function() {
console.log("连接成功");
//SOCKET
socket.emit('conn',{ uid: this.uid,userSig:"登录票据" })
});
//线
socket.on('disconnect', ()=> {
socket.connect();//
console.log('关闭链接后重新链接');
this.openSettings();
});
socket.on('reconnect', function() {
console.log("重连成功");
});
//线广
socket.on('login', function(data) {
console.log("会员上线",data.uid);
});
//线广
socket.on('loginout', function(data) {
console.log("会员下线",data.uid);
});
//
socket.on('broadcastingListen', function (data) {
for(i=0;i<data.length;i++){
console.log(data[i]) //msg
}
});
socket.on('login_msg', (msg)=> {
console.log(msg);
});
socket.on('new_msg', (msg)=> {
console.log(msg);
});
//
// this.socket.on('broadcastingListen', (data)=> {
// for(i=0;i<data.length;i++){
// console.log(data[i]) //msg
// }
// });
} else {
socket.io.reconnect();
}
},
change(){
this.uid++;
socket.io.disconnect();
this.connectEv();
},
connectEv(){ connectEv(){
socket.on('connecting', function() { socket.io.reconnect();
console.log("正在连接"); },
connect() {
const socket = io("ws://7and5.cn:2120",{
query: {},
transports: [ 'websocket', 'polling' ],
timeout: 5000,
}); });
socket.on('reconnect', function() { socket.on('connect', ()=> {
console.log("重新连接到服务器"); socket.emit('login', this.uid);
this.$store.commit('setConnect',true);
console.log('连接成功');
}); });
socket.on('connect_failed', function() { //线
console.log("连接失败"); socket.on('disconnect', ()=> {
socket.connect();//
console.log('关闭链接后重新链接');
// this.openSettings();
}); });
socket.on('reconnecting', function() { //线广
console.log("正在重连"); socket.on('loginout', (data)=> {
console.log("会员下线",data);
}); });
//线广
socket.on('login_msg', (msg)=> {
console.log("会员上线",msg);
});
//
socket.on('new_msg', (msg)=> {
console.log(msg);
// this.offMusic();
uni.showToast({
title:msg
})
this.bofang();
});
},
bofang(){
this.bgmMusic.autoplay = true;//
// this.bgmMusic.loop = true;//
this.bgmMusic.src = 'http://m801.music.126.net/20220728102722/4a7c3c7692a5f0b808f03f8ab7d02bfb/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/4800358085/4a32/22b6/02f5/d96abc3bed5758b0e7172ea66aec841d.mp3';//
this.bgmMusic.volume = 1;//
this.bgmMusic.play(()=>{
console.log('背景音乐播放中');
this.ifPlayIng = true;
});
},
//
offMusic(){
if(this.ifPlayIng){
this.bgmMusic.stop();
this.bgmMusic.onStop(()=>{
console.log('背景音乐停止了');
});
this.ifPlayIng = false;
}
}, },
// uniapp // uniapp
openSettings() { openSettings() {

22
store/index.js Normal file
View File

@ -0,0 +1,22 @@
// 页面路径store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
state:{//存放状态
uid:'',
ifConnect:false
},
mutations: {
setUid(state, str) {
state.uid = str;
},
setConnect(state, str) {
state.ifConnect = str;
}
}
})
export default store