lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加开窗口功能

This commit is contained in:
fangxiang 2021-08-07 11:04:39 +08:00
parent d573ae8058
commit 9c52c43b19
8 changed files with 190 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/common/ClientConnection.ts
View File

@ -38,6 +38,9 @@ export default class ClientConnection {
user_name?: string | null,
password?: string | null
) {
if (this._destoryed) {
return;
}
this.url = url;
this.user_name = user_name ?? "";
this.password = password ?? "";
@ -77,13 +80,36 @@ export default class ClientConnection {
onClose(ev: CloseEvent) {
this._is_login = false;
console.log("onClose");
this._reconnect();
EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
}
onError(ev: Event) {
this._is_login = false;
setTimeout(() => {
this.reconnectTo(this.url, this.user_name, this.password);
}, 5000);
this._reconnect();
EventBus.getInstance().emit(EventNamesDefine.WebSocketError, this);
}
private _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
private _reconnect() {
if (this._destoryed) {
return;
}
if (
!this.ws ||
(this.ws.readyState != WebSocket.CONNECTING &&
this.ws.readyState != WebSocket.OPEN)
) {
if (this._reconnectTimer) {
clearTimeout(this._reconnectTimer);
this._reconnectTimer = null;
}
this._reconnectTimer = setTimeout(() => {
console.log("reconnection...", new Date().getSeconds());
this.reconnectTo(this.url, this.user_name, this.password);
}, 3000);
}
}
onOpen(ev: Event) {
@ -111,6 +137,12 @@ export default class ClientConnection {
if (login_response) {
this._is_login =
!login_response.has_exception && login_response.success;
if (this.is_login) {
EventBus.getInstance().emit(
EventNamesDefine.WebSocketConnected,
this
);
}
if (
this.login_callback &&
typeof this.login_callback == "function"
@ -118,8 +150,7 @@ export default class ClientConnection {
this.login_callback(this._is_login);
}
}
}
if (this.rpc_map.has(packet.rpc_id)) {
} else if (this.rpc_map.has(packet.rpc_id)) {
const f = this.rpc_map.get(packet.rpc_id);
if (f && typeof f == "function") {
f(false, packet, ev.data);
@ -232,4 +263,15 @@ export default class ClientConnection {
JSON.stringify(new Protocol.CloseWindowRequestEntity(window_id))
);
}
public openWindow(data: Protocol.OpenWindowRequestEntity) {
this.ws?.send(JSON.stringify(data));
}
private _destoryed = false;
public destory() {
this._destoryed = true;
this.ws?.close();
this.ws = null;
}
}

9
src/common/EventBus.ts
View File

@ -12,7 +12,12 @@ export default class EventBus extends EventEmitter {
}
export namespace EventNamesDefine {
export const UnSelectAllWindows = "unselect_all_windows";
export const WindowResize = "windowResize";
export const UnSelectAllWindows = "onUnSelectAllWindows";
export const WindowResize = "onWindowResize";
export const ResponseMessage = "onResponseData";
export const WebSocketClose = "onWebSocketClose";
export const WebSocketError = "onWebSocketError";
export const WebSocketConnected = "onWebSocketConnected";
export const CurrentConnectDisconnect = "onCurrentConnectDisconnect";
export const CurrentConnectConnected = "onCurrentConnectConnected";
}

39
src/common/GlobalData.ts
View File

@ -2,11 +2,11 @@ import { SessionStorage } from "quasar";
import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
import ClientConnection from "./ClientConnection";
import EventBus, { EventNamesDefine } from "./EventBus";
export default class GlobalData {
getSignalSource(uuid: string) {
return this.signal_source.find((item) => item && item.uuid == uuid);
throw new Error("Method not implemented.");
}
private static _instance: GlobalData | null = null;
@ -70,6 +70,43 @@ export default class GlobalData {
new ClientConnection(url, user_name, password)
);
}
EventBus.getInstance().on(EventNamesDefine.WebSocketClose, (connection) =>
this._onWebSocketClose(connection)
);
EventBus.getInstance().on(EventNamesDefine.WebSocketError, (connection) =>
this._onWebSocketError(connection)
);
EventBus.getInstance().on(
EventNamesDefine.WebSocketConnected,
(connection) => this._onWebSocketConnected(connection)
);
}
private _onWebSocketClose(connection: ClientConnection) {
if (this.getCurrentClient() == connection) {
EventBus.getInstance().emit(
EventNamesDefine.CurrentConnectDisconnect,
connection
);
}
}
private _onWebSocketError(connection: ClientConnection) {
if (this.getCurrentClient() == connection) {
EventBus.getInstance().emit(
EventNamesDefine.CurrentConnectDisconnect,
connection
);
}
}
private _onWebSocketConnected(connection: ClientConnection) {
if (this.getCurrentClient() == connection) {
EventBus.getInstance().emit(
EventNamesDefine.CurrentConnectConnected,
connection
);
}
}
public getClient(name: string | null) {

13
src/entities/WSProtocol.ts
View File

@ -223,9 +223,20 @@ export namespace Protocol {
y: number = 0;
width: number = 0;
height: number = 0;
constructor() {
constructor(
signal_source: string,
x: number,
y: number,
width: number,
height: number
) {
super();
this.command = Commands.kOpenWindow;
this.signal_source = signal_source ?? "";
this.x = x ?? 0;
this.y = y ?? 0;
this.width = width ?? 0;
this.height = height ?? 0;
}
}

9
src/i18n/zh-CN/index.ts
View File

@ -10,7 +10,11 @@ export default {
password: "密码",
"please input user name": "请输入用户",
"please input password": "请输入密码",
"login fail!": "登陆失败",
"login fail!": "登陆失败！",
"user or password error!": "用户名或密码错误！",
"connect time out!": "连接超时",
"please check server state, or check server ip address!":
"请检查服务器状态，或者检查服务器IP地址是否正确！",
"Please type something": "请输入内容",
"grid setting": "宫格设置",
@ -23,4 +27,7 @@ export default {
"close all windwos": "关闭所有窗口",
"close this window": "关闭当前窗口",
"close other windows": "关闭其它窗口",
"network disconnect!": "网络连接断开!",
"wait reconnection": "等待重连中",
};

22
src/pages/Index.vue
View File

@ -5,13 +5,29 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import WallPage from 'src/pages/WallPage.vue';
import { defineComponent } from "vue";
import WallPage from "src/pages/WallPage.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
export default defineComponent({
name: 'PageIndex',
name: "PageIndex",
components: { WallPage },
setup() {
const $q = useQuasar();
const $t = useI18n();
EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
$q.loading.show({
message:
$t.t("network disconnect!") + $t.t("wait reconnection") + "...",
});
});
EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
$q.loading.hide();
});
return {};
},
});

56
src/pages/Login.vue
View File

@ -15,7 +15,9 @@
class="q-gutter-md"
>
<q-input
autofocus
:loading="data.loading"
:disable="data.loading"
filled
v-model="data.user_name"
:label="$t('user name')"
@ -46,7 +48,9 @@
<q-input
ref="password_input"
:loading="data.loading"
:disable="data.loading"
filled
:type="data.show_password ? '' : 'password'"
v-model="data.password"
:label="$t('password')"
:hint="$t('please input password')"
@ -64,6 +68,11 @@
"
>
<template v-if="data.password" v-slot:append>
<q-icon
:name="data.show_password ? 'visibility' : 'visibility_off'"
class="cursor-pointer"
@click="data.show_password = !data.show_password"
/>
<q-icon
name="cancel"
@click.stop="data.password = null"
@ -104,6 +113,7 @@ class _Data {
password: string | null = null;
loading = false;
ip_address = "127.0.0.1";
show_password = false;
constructor() {
let temp = LocalStorage.getItem("default_ip_address");
@ -135,7 +145,7 @@ export default defineComponent({
const $t = useI18n();
const $route = useRouter();
const data = reactive(new _Data());
let web_socket: ClientConnection | null = null;
return {
data,
loga(a: any) {
@ -146,26 +156,41 @@ export default defineComponent({
data.loading = true;
try {
let global_data = GlobalData.getInstance();
let web_socket = global_data.getClient(data.ip_address);
const url =
"ws://" +
data.ip_address +
":" +
GlobalData.kDefaultWebsocektPort.toString() +
GlobalData.kWebsocketResource;
if (web_socket) {
web_socket.reconnectTo(url, data.user_name, data.password);
} else {
web_socket = new ClientConnection(
url,
data.user_name,
data.password
);
global_data.addClient(data.ip_address, web_socket);
}
global_data.setCurrentClientName(data.ip_address);
web_socket = new ClientConnection(
url,
data.user_name,
data.password
);
let timer = setTimeout(() => {
web_socket?.destory();
web_socket = null;
$q.notify({
color: "negative",
icon: "warning",
message:
$t.t("login fail!") +
$t.t("connect time out!") +
$t.t(
"please check server state, or check server ip address!"
),
position: "center",
timeout: 1500,
});
SessionStorage.set("auth", PermissionLevel.None);
resolve(false);
data.loading = false;
}, 5000);
web_socket.login_callback = (is_login) => {
if (is_login) {
clearTimeout(timer);
if (is_login && web_socket) {
global_data.addClient(data.ip_address, web_socket);
global_data.setCurrentClientName(data.ip_address);
SessionStorage.set("auth", PermissionLevel.Root);
SessionStorage.set("url", url);
SessionStorage.set("name", data.ip_address);
@ -176,7 +201,8 @@ export default defineComponent({
$q.notify({
color: "negative",
icon: "warning",
message: $t.t("login fail!"),
message:
$t.t("login fail!") + $t.t("user or password error!"),
position: "center",
timeout: 1500,
});

20
src/pages/WallPage.vue
View File

@ -301,7 +301,6 @@ export default defineComponent({
const window = $store.state.windows.find(
(item) => item.window_id == temp.window_id
);
console.log(window);
if (window) {
$store.commit("setWindowPropertys", [
{
@ -369,7 +368,24 @@ export default defineComponent({
if (signal_sources.length) {
let signal_source = signal_sources[0];
console.log(signal_source);
if (signal_source) {
const dom = e.target as HTMLElement;
if (dom) {
GlobalData.getInstance()
.getCurrentClient()
?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
(dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
wall_width_scaler.value,
(dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
wall_height_scaler.value,
dom.offsetWidth * wall_width_scaler.value,
dom.offsetHeight * wall_height_scaler.value
)
);
}
}
}
}
},