Skip to content

A
anyremote-miniapp
Commit 38c0718d by wxl
Options

更改

parent 75dcdad6
Showing with 530 additions and 59 deletions
.vscode/settings.json
{
"volar.tsPlugin": false
"volar.tsPlugin": true
}
\ No newline at end of file
package-lock.json
......@@ -4187,6 +4187,17 @@
"integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=",
"dev": true
},
"clipboard": {
"version": "2.0.6",
"resolved": "https://registry.npm.taobao.org/clipboard/download/clipboard-2.0.6.tgz",
"integrity": "sha1-UpISlu7A/fd+rRdJQhshyWhkc3Y=",
"optional": true,
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz?cache=0&sync_timestamp=1604880226973&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-5.0.0.tgz",
......@@ -5045,6 +5056,12 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npm.taobao.org/delegate/download/delegate-3.2.0.tgz",
"integrity": "sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=",
"optional": true
},
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
......@@ -5316,6 +5333,18 @@
}
}
},
"eminent-ui": {
"version": "0.0.6",
"resolved": "https://registry.npm.taobao.org/eminent-ui/download/eminent-ui-0.0.6.tgz",
"integrity": "sha1-g4N+8bzwq03YONjW0giTxzjJMAk=",
"requires": {
"github-markdown-css": "^4.0.0",
"marked": "^1.1.1",
"prismjs": "^1.21.0",
"vue": "^3.0.0",
"vue-router": "4.0.0-beta.3"
}
},
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz?cache=0&sync_timestamp=1611911444344&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Femoji-regex%2Fdownload%2Femoji-regex-7.0.3.tgz",
......@@ -6911,6 +6940,11 @@
"assert-plus": "^1.0.0"
}
},
"github-markdown-css": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/github-markdown-css/download/github-markdown-css-4.0.0.tgz",
"integrity": "sha1-vp9Mr3o4kijUw2gzYmD/yQkGHzU="
},
"glob": {
"version": "7.1.6",
"resolved": "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz",
......@@ -7039,6 +7073,15 @@
"minimist": "^1.2.5"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npm.taobao.org/good-listener/download/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"optional": true,
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.4",
"resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz",
......@@ -8826,6 +8869,11 @@
"integrity": "sha1-n8tpvP24cXv9A5jG7C2TA2743mA=",
"dev": true
},
"marked": {
"version": "1.2.9",
"resolved": "https://registry.npm.taobao.org/marked/download/marked-1.2.9.tgz",
"integrity": "sha1-U3hviwXUwBoqWna30eyZQ9Kdctw="
},
"math-random": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/math-random/download/math-random-1.0.4.tgz",
......@@ -10706,6 +10754,14 @@
"renderkid": "^2.0.4"
}
},
"prismjs": {
"version": "1.23.0",
"resolved": "https://registry.npm.taobao.org/prismjs/download/prismjs-1.23.0.tgz?cache=0&sync_timestamp=1609438547304&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprismjs%2Fdownload%2Fprismjs-1.23.0.tgz",
"integrity": "sha1-07OWf31yRAaQSXZSqdQP8EYGfzM=",
"requires": {
"clipboard": "^2.0.0"
}
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
......@@ -11744,6 +11800,12 @@
}
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/select/download/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"optional": true
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
......@@ -13525,6 +13587,12 @@
"setimmediate": "^1.0.4"
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/tiny-emitter/download/tiny-emitter-2.1.0.tgz",
"integrity": "sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=",
"optional": true
},
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/tiny-invariant/download/tiny-invariant-1.1.0.tgz",
......@@ -14281,10 +14349,15 @@
}
}
},
"vue-router": {
"version": "4.0.0-beta.3",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.3.tgz?cache=0&sync_timestamp=1613740713323&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.3.tgz",
"integrity": "sha1-5G9FgHAjpLjOc6FDoha0yeo+skM="
},
"vue-vulcan": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/vue-vulcan/-/vue-vulcan-0.1.0.tgz",
"integrity": "sha512-N+SUD/NmVPKR1Yop2S7rBtcL0iaIkOnUuag8/WqFNLzWsNLB3k4zd/KPAz1hy4rAvYrAUPB1KHvMvrneBL05NQ==",
"resolved": "https://registry.npm.taobao.org/vue-vulcan/download/vue-vulcan-0.1.0.tgz",
"integrity": "sha1-vBpvGRsRaEvxbQafeYC2Hh1fSWo=",
"requires": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
......
package.json
......@@ -40,6 +40,7 @@
"@tarojs/extend": "^3.0.26",
"@tarojs/runtime": "3.0.26",
"@tarojs/taro": "3.0.26",
"eminent-ui": "0.0.6",
"rxjs": "^6.6.3",
"vue": "^3.0.0",
"vue-vulcan": "^0.1.0"
......
src/app.config.ts
......@@ -2,12 +2,32 @@ export default {
pages: [
'pages/index/index',
'pages/login/index',
'pages/meeting/index'
'pages/meeting/index',
'pages/mine/index',
'pages/calling/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
},
tabBar: {
"selectedColor": "#40a9ff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "联系人",
"iconPath": "assets/contacts.png",
"selectedIconPath": "assets/contacts_a.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "assets/user_center.png",
"selectedIconPath": "assets/user_center_a.png"
}
]
},
}
src/app.ts
import { authorize } from '@tarojs/taro';
import { createApp } from 'vue';
import './app.less';
import { useProviders } from './hooks/common/useProvider';
import { useCalling } from './hooks/store/video/useCalling';
import { useAuthCheck } from './hooks/user/useAuthCheck';
const App = createApp({
onShow () {},
// 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
setup() {
useAuthCheck();
useProviders(useCalling);
authorize({
scope: 'scope.camera'
})
......
src/hooks/common/useRequest.ts
import Taro from '@tarojs/taro';
import Taro, { navigateTo } from '@tarojs/taro';
import { useState } from "./useState";
import { ResBody } from '../../types/https';
import { from } from 'rxjs';
......@@ -38,6 +38,7 @@ export function useRequest<T>(
const [ status, setStatus ] = useState<HttpStatus>(null);
const [ resData, setResData ] = useState<T>(null);
const opt = { ...defaultOption, ...options };
const { token } = useInjector(useAuthStore, 'root');
const authInfo = useInjector(useAuthStore, 'root');
......@@ -68,6 +69,10 @@ export function useRequest<T>(
})
const doRequest = (data: any = {}) => {
if(!token) {
navigateTo({url: 'pages/login/index'});
return;
}
setStatus('pending') ;
from(
Taro.request({
......
src/hooks/intercept/useAuthIntercept.ts
import { HttpIntercept } from 'vue-vulcan';
import { useAuthStore } from '../store/auth/useAuthStore';
export function useAuthIntercept(): HttpIntercept {
const { token } = useAuthStore()
export function useAuthIntercept() {
const requestIntercept = (req: RequestInit) => {
return new Promise((resolve, reject) => {
if(token) {
req.body.token = token;
}
return req
})
}
const responseIntercept = () => {}
return {
requestIntercept,
responseIntercept
}
}
\ No newline at end of file
src/hooks/store/video/index.ts
import { watch } from "vue";
import { useInjector } from "../../../hooks/common/useInjector";
import { useRequest } from "../../../hooks/common/useRequest";
import { useState } from "../../../hooks/common/useState";
import { useAuthStore } from "../auth/useAuthStore";
import { useAgoraClient } from "./useAgoraClient";
// import { watch } from "vue";
// import { useInjector } from "../../../hooks/common/useInjector";
// import { useRequest } from "../../../hooks/common/useRequest";
// import { useState } from "../../../hooks/common/useState";
// import { useAuthStore } from "../auth/useAuthStore";
// import { useAgoraClient } from "./useAgoraClient";
export function useVideoCallStore() {
// export function useVideoCallStore() {
const [isMini, setMiniState] = useState(false);
const [channelInfo, getChannelInfo, status] = useRequest<any>('/getAgoraToken', {}, {auto: false});
const { user } = useInjector(useAuthStore);
// const [isMini, setMiniState] = useState(false);
// const [channelInfo, getChannelInfo, status] = useRequest<any>('/getAgoraToken', {}, {auto: false});
// const { user } = useInjector(useAuthStore);
const agora = useAgoraClient();
// const agora = useAgoraClient();
const joinChannel = (channel_id?: string) => {
getChannelInfo({channel_id});
watch( status, val => {
if(val === 'success') {
const token = channelInfo.value.agora_token;
const cid = channelInfo.value.channel_id;
agora.joinChannel(token, cid, user.value.id);
}
})
}
// const joinChannel = (channel_id?: string) => {
// getChannelInfo({channel_id});
// watch( status, val => {
// if(val === 'success') {
// const token = channelInfo.value.agora_token;
// const cid = channelInfo.value.channel_id;
// agora.joinChannel(token, cid, user.value.id);
// }
// })
// }
return {
isMini,
streams: agora.streamList,
action: {
setMiniState,
joinChannel
}
}
// return {
// isMini,
// streams: agora.streamList,
// action: {
// setMiniState,
// joinChannel
// }
// }
}
// }
src/hooks/store/video/useAgoraClient.ts
......@@ -3,6 +3,9 @@ import { filter, tap } from 'rxjs/operators';
import { useState } from '../../../hooks/common/useState';
import { onMounted } from 'vue';
import * as AgoraMiniappSDK from '../../../libs/Agora_SDK_for_WeChat';
import { useInjector } from '../../common/useInjector';
import { useChannelInfo } from './useChannelInfo';
import { useAuthStore } from '../auth/useAuthStore';
interface VideoItemData {
url: string;
......@@ -30,25 +33,27 @@ export function useAgoraClient() {
const channelState$ = new BehaviorSubject<string>('leave');
const [streamList, setStreamList] = useState<VideoItemData[]>([])
const [streamList, setStreamList] = useState<VideoItemData[]>([]);
const { current, onReady } = useInjector(useChannelInfo, 'root');
const { user } = useInjector(useAuthStore, 'root');
onMounted( () => {
streamLog$.subscribe(console.log);
subscribeRemoteStream();
})
const joinChannel = (ctoken: string, cid: string, uid: string) => {
onReady( () => {
agoraInit$
.pipe(tap(_=>console.log('准备加入频道')))
.subscribe(
_ => client.join(ctoken, cid, uid, () => {
_ => client.join(current.value.agora_token, current.value.channel_id, user.value.id, () => {
channelState$.next('joined');
streamLog$.next('频道加入成功'+ctoken);
streamLog$.next('频道加入成功'+current.value.agora_token);
pushLocalStream();
}, console.log),
console.log
)
}
)
})
const leaveChannel = () => {
client.leave( () => channelState$.next('leave'))
......@@ -100,7 +105,6 @@ export function useAgoraClient() {
return {
streamList,
joinChannel,
leaveChannel,
pushLocalStream
}
......
src/hooks/store/video/useCalling.ts 0 → 100644
import { onSocketMessage, sendSocketMessage, showModal } from "@tarojs/taro";
import { Subject } from "rxjs";
import { useInjector } from "../../common/useInjector";
import { onMounted } from "vue";
import { useAuthStore } from "../auth/useAuthStore";
import { useChannelInfo } from "./useChannelInfo";
import { useState } from "../../common/useState";
import { UserData } from "../../../types/auth";
import { useSocket } from "./useSocket";
interface CallingMessage {
fromID: string;
fromName: string;
toID: string;
toName:string;
companyID: string;
channelID: string;
msgMainFlag:string;
msgSubFlag: string;
}
export function useCalling() {
const [targetUser, setTarget] = useState<UserData>(null)
const { user } = useInjector(useAuthStore, 'root');
const channel = useInjector(useChannelInfo, 'root');
const ws = useSocket()
// 初始化websocket
onMounted( () => {
ws.init(`wss://www.if-ar.com:3009?fromID=${user.value.id}&fromName=${user.value.nickname}&signID=SA&companyID=${user.value.company_id}`)
onSocketMessage( res => {
console.log(res)
const data = JSON.parse(res.data)
if(data.msgMainFlag === 'CallOffer') {
switch(data.msgSubFlag) {
case '':
showModal({
title: `收到来自${data.fromName}的呼叫，是否同意？`,
success: () => answer(data, 'Connect'),
fail: () => answer(data, 'Hangup')
})
}
}
})
})
// 发出呼叫
const send = () => {
channel.createChannel();
channel.onReady( () => {
const data = JSON.stringify({
fromID: user.value.id,
fromName: user.value.nickname,
toID: targetUser.value.id,
toNmame: targetUser.value.nickname,
channelID: channel.current.value.channel_id,
msgMainFlag: 'CallOffer',
msgSubFlag: 'Request'
})
sendSocketMessage({ data })
});
}
// 回应呼叫
const answer = (sendData: CallingMessage, action: 'Hangup' | 'Connect') => {
if(action === 'Connect') channel.joinCallingChannel(sendData.channelID);
const data = JSON.stringify({
fromID: user.value.id,
fromName: user.value.nickname,
toID: sendData.fromID,
toName: sendData.fromName,
channelID: sendData.channelID,
msgMainFlag: 'CallAnswer',
msgSubFlag: action
})
sendSocketMessage({ data })
}
// 挂断
const hangup = () => {
const data = JSON.stringify({
fromID: user.value.id,
fromName: user.value.nickname,
toID: targetUser.value.id,
toNmame: targetUser.value.nickname,
channelID: channel.current.value.channel_id,
msgMainFlag: 'CallOffer',
msgSubFlag: 'Hangup'
})
}
const callingState$ = new Subject()
return {
send,
targetUser,
setTarget,
callingState$
}
}
\ No newline at end of file
src/hooks/store/video/useChannelInfo.ts
import { useState } from "../../common/useState";
import { useRequest } from "../../common/useRequest";
import { watch } from "vue";
import { BehaviorSubject } from "rxjs";
interface ChannelData {
channel_id: string;
agora_token: string;
members: string[];
}
export function useChannelInfo() {
const [channelInfo, request] = useRequest<any>('/getAgoraToken');
const [current, setCurrent] = useState<ChannelData>(null);
const [channelInfo, request] = useRequest<ChannelData>('/getAgoraToken', {}, {auto: false});
const ready$ = new BehaviorSubject<boolean>(false);
const createChannel = () => {
request()
}
const joinCallingChannel = (id: string) => {
request({channel_id: id})
}
const onReady = ( callback: () => void) => {
ready$.subscribe( r => { r && callback() })
}
watch(channelInfo, val => {
console.log('channel', val)
setCurrent(val);
val && ready$.next(true);
})
return {
channelInfo,
request
current,
joinCallingChannel,
createChannel,
onReady
}
}
\ No newline at end of file
src/hooks/store/video/useSocket.ts 0 → 100644
import { connectSocket, onSocketOpen, sendSocketMessage } from "@tarojs/taro"
import { timer } from "rxjs";
import { useInjector } from "../../common/useInjector";
import { useAuthStore } from "../auth/useAuthStore";
export function useSocket() {
const { user } = useInjector(useAuthStore);
const init = (url: string) => {
connectSocket({url});
startHeartConnect()
}
const startHeartConnect = () => {
const data = JSON.stringify({
msgMainFlag:"Heart",
fromID: user.value.id,
fromName: user.value.nickname,
toID: '0'
})
onSocketOpen( () => {
timer(0, 5000)
.subscribe( _ => {
sendSocketMessage({ data })
})
})
}
return {
init
}
}
\ No newline at end of file
src/hooks/user/useAuthCheck.ts 0 → 100644
import { onMounted } from "vue";
import { useAuthStore } from "../store/auth/useAuthStore";
import { navigateTo } from '@tarojs/taro'
export function useAuthCheck() {
const user = useAuthStore();
onMounted( () => {
console.log("check", user)
if(!user.token.value) {
navigateTo({url: '/pages/login/index'})
}
})
}
\ No newline at end of file
src/hooks/user/useContactsList.ts 0 → 100644
import { useRequest } from "../common/useRequest";
export function useContactList() {
const [ data ] = useRequest<any>('/getUserList');
return data
}
\ No newline at end of file
src/pages/calling/index.config.ts 0 → 100644
export default {
navigationBarTitleText: '呼叫联系人'
}
src/pages/calling/index.vue 0 → 100644
<script setup>
import { useInjector } from '../../hooks/common/useInjector';
import { computed, getCurrentInstance, onMounted } from 'vue';
import { useCalling } from '../../hooks/store/video/useCalling';
const calling = useInjector(useCalling);
const targetUser = computed( () => calling.targetUser.value );
onMounted( () => {
calling.send();
})
</script>
<template>
<view class="page">
<view class="call-box">
<image class="avatar" :src="targetUser?.avatar"></image>
<text class="tips">正在呼叫{{targetUser?.nickname}}...</text>
</view>
<image class="hangup" src="../../assets/hangup.png"></image>
</view>
</template>
<style lang="less">
page{
width: 100%;
height: 100%;
}
.page{
background:#333;
width:100%;
height:100%;
.call-box{
position: absolute;
top: 30%;
left:50%;
transform: translate(-50%, -50%);
.avatar{
width: 160px;
height: 160px;
overflow: hidden;
border-radius: 50%;
display: block;
margin: 20px auto;
}
.tips{
color: #fff;
font-size: 38px;
}
}
.hangup{
width: 120px;
height: 120px;
display: block;
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: 100px;
}
}
</style>
\ No newline at end of file
src/pages/index/index.vue
<template>
<view class="index">
<button @tap="gotoLogin()">登录</button>
<button @tap="gotoMeeting()">进入会议</button>
<view class="contact-list">
<view class="contact-item" v-for="(item, key) in contacts" :key="key">
<image class="avatar" :src="item.avatar" />
<view class="info">
<view>{{item.nickname}}</view>
<text>{{item.permission}}</text>
</view>
<image @tap="callContacter(item)" class="call" src="../../assets/call.png" />
</view>
</view>
</view>
</template>
<script setup>
<script setup lang="ts">
import { navigateTo } from '@tarojs/taro';
import { UserData } from '../../types/auth';
import { useInjector } from '../../hooks/common/useInjector';
import { useCalling } from '../../hooks/store/video/useCalling';
import { useContactList } from '../../hooks/user/useContactsList';
import './index.less';
const gotoMeeting = () => {
navigateTo({url: '/pages/meeting/index'})
}
const contacts = useContactList();
const calling = useInjector(useCalling);
const gotoLogin = () => {
navigateTo({url: '/pages/login/index'})
const callContacter = (data: UserData) => {
calling.setTarget(data);
navigateTo({url: '/pages/calling/index'});
}
</script>
<style lang="less">
.contact-list{
padding: 20px 30px;
.contact-item{
margin: 25px 0;
padding: 25px 0;
border-bottom: 1px solid #f7f7f7;
display: flex;
align-items: center;
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
overflow:hidden;
}
.info{
flex: 1;
padding: 0 30px;
}
.call{
width: 80px;
height: 80px;
}
}
}
</style>
src/pages/login/index.config.ts 0 → 100644
export default {
navigationBarTitleText: '登录页'
}
src/pages/login/index.vue
<script setup>
import { useFormModel } from '../../hooks/common/useFormModel';
import { useAuthStore } from '../../hooks/store/auth/useAuthStore';
import { watch } from 'vue';
import { navigateTo, navigateBack } from '@tarojs/taro';
const userInfo = useAuthStore()
const [formData, action, states, resData ] = useFormModel('/loginIn', {login_id: '', login_password: ''});
watch(states.httpStatus, status => {
if(status === 'success') {
console.log('登陆成功')
userInfo.saveToken(resData.value.token);
userInfo.saveUserInfo(resData.value);
navigateBack()
}
})
</script>
<template>
<view></view>
</template>
\ No newline at end of file
<view>
<view class="login-box">
<input class="login-item" placeholder="请输入用户名" v-model="formData.login_id">
<input class="login-item" placeholder="请输入密码" v-model="formData.login_password">
<button @tap="action.submit()">登录</button>
</view>
</view>
</template>
<style lang="less">
.login-box{
background: #999;
border-radius: 10px;
padding: 10px;
width: 90%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
.login-item{
margin: 20px 0;
}
}
</style>
\ No newline at end of file
src/pages/mine/index.vue 0 → 100644
<script setup>
</script>
<template>
<view>个人中心</view>
</template>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment