From 529f48641122af7c0aec185e4283d02e97aa0f89 Mon Sep 17 00:00:00 2001
From: shikeying <pxzsky@163.com>
Date: 星期三, 19 四月 2023 14:40:51 +0800
Subject: [PATCH] 增加 websocket
---
src/utils/webconnection.js | 146 ++++++++++++++++
src/utils/Speech.js | 18 ++
src/utils/StringUtils.js | 14 +
src/store/modules/user.js | 51 +++++
src/store/index.js | 4
src/layout/components/Navbar.vue | 10 +
src/store/modules/websoket.js | 31 +++
src/layout/index.vue | 29 +++
src/utils/web-connection.js | 142 +++++++++++++++
src/api/tcp.js | 16 +
src/main.js | 8
package.json | 1
src/store/modules/app.js | 12 +
13 files changed, 479 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 32d83cc..fe7ce13 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
+ "speak-tts": "^2.0.8",
"stylus": "^0.59.0",
"stylus-loader": "^7.1.0",
"viewerjs": "^1.11.3",
diff --git a/src/api/tcp.js b/src/api/tcp.js
new file mode 100644
index 0000000..45301fc
--- /dev/null
+++ b/src/api/tcp.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request';
+
+/**
+ * 鑾峰彇websocket杩炴帴鍦板潃銆�
+ * @param query
+ * @returns {*}
+ * @author 鏃跺厠鑻�
+ * @date 2023-04-17
+ */
+export function getWebsocketUri() {
+ return request({
+ url: '/websocket/uri',
+ method: 'get',
+ params: null
+ })
+}
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 97e5249..85245cd 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -85,9 +85,17 @@
showBreadCrumb:false // 鏄惁鏄剧ず椤堕儴闈㈠寘灞�
}
},
+
+ created() {
+ this.initTts();
+ },
+
methods: {
+ initTts(){
+ this.$store.dispatch('app/setSpeechTts');
+ },
toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
+ this.$store.dispatch('app/toggleSideBar');
},
async logout() {
this.$confirm('纭畾娉ㄩ攢骞堕��鍑虹郴缁熷悧锛�', '鎻愮ず', {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0a47150..c9032db 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -52,8 +52,37 @@
},
variables() {
return variables;
+ },
+
+ // 2023-04-17锛屽畾涔夋帴鏀秝ebsocket娑堟伅
+ getWsMsg (){
+ // return this.$store.websocket.state.webSocketMsg;
+ return this.$store.state.user.webSocketMsg;
}
},
+ // 2023-04-17
+ watch: {
+ getWsMsg:{
+ handler: function(newVal) {
+ // console.log(newVal)
+ // alert('鎺ユ敹鍒皐ebSocket鎺ㄩ��:'+ newVal);
+ this.$notify({
+ title: '鏂版秷鎭彁閱掞細', //鏍囬
+ // message: '杩欐槸涓�鏉′笉浼氳嚜鍔ㄥ叧闂殑娑堟伅', //鍐呭
+ duration: 0, //璁剧疆寮规娑堝け浜嬩欢
+ position:'bottom-right', // 璁剧疆寮规鍦ㄥ睆骞曠殑鍝釜瑙掑脊鍑猴紙鍙兘璁剧疆4涓锛�
+ type: 'info', //缁欐爣棰樺墠鍔犱竴涓皬鍥炬爣
+ offset: 100, //鍋忕Щ閲忥細璺濈鍥涗釜瑙掔殑鍋忕Щ绋嬪害锛堥粯璁ゅ亸绉讳簡16px锛�
+ dangerouslyUseHTMLString: true, //鏄惁鏀寔寮瑰嚭妗嗗唴浼犲叆 HTML 鐗囨
+ message: '<strong>杩欐槸 <i>HTML</i> 鐗囨</strong>' + newVal, //寮�鍚悗锛岃繖閲屽彲浠ュ啓html
+ showClose: true, //闅愯棌鍏抽棴鎸夐挳锛堝彸涓婅鐨剎 榛樿涓簍rue锛屾樉绀猴級
+ onClose() {console.log('鍏抽棴鍟�', event)}, // 鎵嬪姩鍏抽棴鏃剁殑鍥炶皟鍑芥暟
+ });
+ this.$store.state.app.tts.speak("鏈夋柊娑堟伅鎻愰啋锛岃鐐瑰嚮鏌ョ湅");
+ }
+ }
+ },
+
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
diff --git a/src/main.js b/src/main.js
index 1cb2625..3939f08 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,11 @@
// 瀛楀吀鏁版嵁缁勪欢
import DictData from '@/components/RuoYi/DictData'
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
+//~ 骞冲彴鎻愪緵鐨勭粍浠讹紝鏃跺厠鑻憋紝2023-04-17
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
+// import * as WebConnection from "@/utils/webconnection";
+
// 鍏ㄥ眬鏂规硶鎸傝浇
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
@@ -49,6 +54,9 @@
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
+// 鏃跺厠鑻憋紝2023-04-17
+// Vue.prototype.webConnection = WebConnection
+
// 鍏ㄥ眬缁勪欢鎸傝浇
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
diff --git a/src/store/index.js b/src/store/index.js
index 97aaef8..4711fd6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,6 +8,9 @@
import settings from './modules/settings'
import getters from './getters'
+// 鏃跺厠鑻憋紝2023-04-17
+// import websocket from './modules/websoket'
+
Vue.use(Vuex)
const store = new Vuex.Store({
@@ -18,6 +21,7 @@
tagsView,
permission,
settings
+ // websocket
},
getters
})
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 3e22d1c..09447df 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,4 +1,5 @@
import Cookies from 'js-cookie'
+import SpeechObject from '@/utils/Speech'
const state = {
sidebar: {
@@ -7,7 +8,10 @@
hide: false
},
device: 'desktop',
- size: Cookies.get('size') || 'medium'
+ size: Cookies.get('size') || 'medium',
+
+ // 2023-04-18锛岃闊虫挱鎶ュ璞�
+ tts: null
}
const mutations = {
@@ -37,6 +41,9 @@
},
SET_SIDEBAR_HIDE: (state, status) => {
state.sidebar.hide = status
+ },
+ SET_SPEECH_TTS: (state) => {
+ state.tts = new SpeechObject();
}
}
@@ -55,6 +62,9 @@
},
toggleSideBarHide({ commit }, status) {
commit('SET_SIDEBAR_HIDE', status)
+ },
+ setSpeechTts({commit}){
+ commit('SET_SPEECH_TTS')
}
}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 3538789..d9b29c6 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,6 +1,10 @@
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import {encrypt} from '@/utils/jsencrypt'
+// import Vue from 'vue'
+import {Message} from "element-ui";
+// import WebConnection from "@/utils/webconnection";
+import WebConnection from "@/utils/web-connection";
const user = {
state: {
@@ -8,7 +12,12 @@
name: '',
avatar: '',
roles: [],
- permissions: []
+ permissions: [],
+ // 2023-04-17 娣诲姞websocket
+ webConnection: null, // 鍗曚緥瀵硅薄
+ webSocketMsg: null, // 鎺ユ敹鍒扮殑娑堟伅
+ uri: null, // 杩炴帴websocket鍦板潃
+ uid: null // 杩炴帴鐢ㄦ埛鏍囪瘑
},
mutations: {
@@ -26,6 +35,29 @@
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
+ },
+
+ // 2023-04-17
+ SET_CONNECTION: (state, data) => {
+ // var webConnection = new WebConnection();
+ // if(state.webConnection == null){
+ state.webConnection = new WebConnection(data.uri, data.uid);
+ state.webConnection.startConnect();
+ // }
+ },
+ SET_CONNECTION_CLEAR: (state, data) => {
+ if(state.webConnection != null){
+ state.webConnection.shutdown();
+ }
+ state.webConnection = null;
+ },
+ // 2023-04-17锛岀洃鎺ф秷鎭彉鍖�
+ SET_WS_MSG: (state, data)=>{
+ state.webSocketMsg = data;
+ },
+ SET_WS_INFO: (state, data)=>{
+ state.uri = data.uri;
+ state.uid = data.uid;
}
},
@@ -68,7 +100,23 @@
}
commit('SET_NAME', user.user_name)
commit('SET_AVATAR', avatar)
+
+ // 2023-04-17锛岃幏鍙栫敤鎴峰悓鏃讹紝鍚姩锛歸ebsocket
+ // this.webConnection = new WebConnection();
+ // this.webConnection.uri = res.data.uri;
+ // this.webConnection.uid = res.data.uid;
+ // vue.webConnection.setInfo(res.data.uri, res.data.uid);
+ // this.webConnection.timedCheckConnection();
+ // this.$store.dispatch('CreateWebConnection', res.data).then(()=>{
+ // }).catch(err => {
+ // Message.error(err);
+ // });
+ commit('SET_WS_INFO', res.data);
+ commit('SET_CONNECTION', res.data);
+ console.log(".............CreateWebConnection()");
+
resolve(res)
+
}).catch(error => {
reject(error)
})
@@ -82,6 +130,7 @@
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
+ commit('SET_CONNECTION_CLEAR', null)
removeToken()
// console.log("鍒犻櫎娴忚鍣╰oken...");
resolve()
diff --git a/src/store/modules/websoket.js b/src/store/modules/websoket.js
new file mode 100644
index 0000000..cb804cb
--- /dev/null
+++ b/src/store/modules/websoket.js
@@ -0,0 +1,31 @@
+import WebConnection from "@/utils/webconnection";
+
+/**
+ * 璇ュ璞″簾寮冿紝鏀惧埌锛歶ser缁勪欢涓簡
+ * @type {{mutations: {SET_CONNECTION: websocket.mutations.SET_CONNECTION, SET_WS_MSG: websocket.mutations.SET_WS_MSG}, state: {webConnection: null, webSocketMsg: null}, actions: {CreateWebConnection({commit: *}, *): void}}}
+ */
+const websocket = {
+ state: {
+ webConnection: null,
+ webSocketMsg: null
+ },
+
+ mutations: {
+ SET_CONNECTION: (state, data) => {
+ // var webConnection = new WebConnection();
+ WebConnection.setInfo(data.uri, data.uid);
+ state.webConnection = WebConnection;
+ },
+ SET_WS_MSG: (state, data)=>{
+ state.webSocketMsg = data;
+ }
+ },
+
+ actions: {
+ CreateWebConnection({ commit }, data){
+ commit('SET_CONNECTION', data);
+ }
+ }
+}
+
+export default websocket
diff --git a/src/utils/Speech.js b/src/utils/Speech.js
new file mode 100644
index 0000000..65de2f8
--- /dev/null
+++ b/src/utils/Speech.js
@@ -0,0 +1,18 @@
+import Speech from 'speak-tts'
+
+class SpeechObject {
+
+ constructor() {
+ this.speech = new Speech();
+ this.speech.setLanguage("zh-CN");
+ this.speech.init().then(() => {console.log("tts......")});
+ }
+
+ speak(message){
+ this.speech.speak({ text: message }).then(() => {
+ console.log("tts鎴愬姛");
+ });
+ }
+}
+
+export default SpeechObject;
diff --git a/src/utils/StringUtils.js b/src/utils/StringUtils.js
new file mode 100644
index 0000000..03accdb
--- /dev/null
+++ b/src/utils/StringUtils.js
@@ -0,0 +1,14 @@
+/**
+ * 鍒ゆ柇缁欏畾瀛楃涓叉槸鍚︿负绌�
+ * @param val
+ * @returns {boolean}
+ * @author 鏃跺厠鑻�
+ * @date 2023-04-18
+ */
+export function isEmptyValue(val){
+ if(val == null || val == undefined || val == '' || val == 'null' || val == 'undefined'){
+ return true;
+ }
+ return false;
+}
+
diff --git a/src/utils/web-connection.js b/src/utils/web-connection.js
new file mode 100644
index 0000000..2cdbf13
--- /dev/null
+++ b/src/utils/web-connection.js
@@ -0,0 +1,142 @@
+import {isEmptyValue} from '@/utils/StringUtils'
+import store from "@/store";
+
+/**
+ * 瀹氫箟'Websocket'杩炴帴瀵硅薄銆�
+ * @author 鏃跺厠鑻�
+ * @date 2023-04-17
+ */
+class WebConnection {
+ // static uid;
+ // static uri;
+ constructor(_uri, _uid) {
+ if(isEmptyValue(_uri)){
+ throw 'uri鍙傛暟涓虹┖';
+ }
+ if(isEmptyValue(_uid)){
+ throw 'uid鍙傛暟涓虹┖';
+ }
+ this.uri = _uri;
+ this.uid = _uid;
+ this.socket = null;
+ this._ws_timer = setInterval(this.timedCheckConnection, 120000); // 瀹氭椂浠诲姟
+ }
+
+ shutdown(){
+ if(this.socket != null && this.socket != undefined){
+ this.socket.close();
+ }
+ }
+
+ startConnect(){
+ if('WebSocket' in window){
+ this.socket = new WebSocket(this.uri);
+ this.socket.onopen = this.wsOpen;
+ this.socket.onmessage = this.wsMessage;
+ this.socket.onerror = this.wsError;
+ this.socket.onclose = this.wsClose;
+ } else {
+ this.socket = null;
+ console.log('鍒涘缓ws閿欒锛屽彲鑳藉綋鍓嶆祻瑙堝櫒涓嶆敮鎸亀ebSocket')
+ }
+ }
+
+ timedCheckConnection(){
+ let uri = store.state.user.uri;
+ let uid = store.state.user.uid;
+ if(!isEmptyValue(uri) && !isEmptyValue(uid)){
+ // 2023-04-18锛岃繖閲屼篃鏃犳硶鐩存帴浣跨敤锛歵his.socket锛屽洜涓烘鏃朵负绌猴紙undefined锛�
+ // console.log("鏄惁杩炴帴 = " + this.socket);
+ // if(this.socket == null || this.socket == undefined || !this.connected()){
+ if(store.state.user.webConnection == null || !store.state.user.webConnection.connected()){
+ this.uri = uri;
+ this.uid = uid;
+ console.log("閲嶆柊杩炴帴锛�" + this.uri);
+ store.state.user.webConnection.startConnect();
+ }
+ } else{
+ console.error("uri鎴杣id涓虹┖," + this.uid + ", " + this.uri);
+ }
+ }
+ wsOpen(){
+ // 2023-04-18锛屾敞鎰忥細杩欓噷鍥炶皟鏂规硶涓棤娉曠洿鎺ヨ幏鍙栵細this.uid锛岀寽娴嬫槸鍥犱负涓婁笅鏂囩幆澧冨凡缁忓彉鍖栵紙绫讳技浜庡尶鍚嶇被鎹㈡垚鐙珛绫荤殑鎯呭喌锛�
+ // 鍥犳锛岀粡杩囬暱鏃堕棿鐮旂┒锛屽喅瀹氶渶瑕佹斁鍦ㄥ叏灞�store涓��
+ let uid = store.state.user.uid;
+ console.log("--------> uid = " + uid);
+ this.send(JSON.stringify({"protocol":"login", "uid":uid}));
+ // console.log(this);
+ }
+ wsClose(){
+ this.uid = store.state.uid;
+ console.log("娴忚鍣ㄦ柇寮�杩炴帴锛�" + this.uid);
+ }
+ wsError(err){
+ console.log('== websocket error ==', err);
+ }
+ wsMessage(event){
+ // console.log(event);
+ if(event.data == null || event.data == "" || event.data == "null"){
+ console.log("鎺ユ敹鍒版湇鍔＄绌烘暟鎹甛n");
+ return;
+ }
+ store.state.user.webConnection.processServerRequest(eval("("+ event.data +")"));
+ }
+
+ processServerRequest(data){
+ // console.log(data);
+ if(data == null){
+ return;
+ }
+ if(data.protocol == "heartbeat"){
+ return;
+ }
+ if(data.protocol == "login"){
+ if(data.status == 0){
+ // uid = data.uid;
+ //$("#showText").append("鏈嶅姟宸茶繛鎺ワ紝寮�濮嬫彁闂細" + data.uid + "\n");
+ console.log("娴忚鍣ㄨ繛鎺ユ垚鍔�:" + data.uid);
+ } else {
+ console.log("鐧诲綍璁よ瘉澶辫触锛�" + data.status + "\n");
+ }
+ return;
+ }
+
+ if(data.protocol == "data" || data.protocol == "broadcast"){
+ console.log("鎺ユ敹鍒皐eb鎺ㄩ�侊細");
+ console.log(data.data + "\n");
+ store.commit('SET_WS_MSG', data.data);
+ // if(data.data.touch == 1){
+ // touchEvent(data.data);
+ // } else {
+ // voiceEvent(data.data);
+ // }
+ }
+ }
+
+ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ //~ 鍐呴儴绉佹湁鏂规硶
+ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ send(message){
+ if(this.socket == null){
+ return;
+ }
+ if (this.socket.readyState == WebSocket.OPEN) {
+ this.socket.send(message);
+ } else {
+ console.log("connection is not start.");
+ }
+ }
+
+ connected(){
+ if(this.socket == null || this.socket == undefined){
+ return false;
+ }
+ if(this.socket.readyState == 1){
+ return true;
+ }
+ return false;
+ }
+
+}
+
+export default WebConnection;
diff --git a/src/utils/webconnection.js b/src/utils/webconnection.js
new file mode 100644
index 0000000..6db8fb1
--- /dev/null
+++ b/src/utils/webconnection.js
@@ -0,0 +1,146 @@
+/**
+ * 瀹氫箟'Websocket'杩炴帴瀵硅薄銆�
+ * @author 鏃跺厠鑻�
+ * @date 2023-04-17
+ * @date 2023-04-18 瀵硅薄搴熷純锛屽弬鑰冿細web-connection.js
+ */
+const WebConnection = {
+ uri: null, // 杩炴帴鍦板潃
+ _uid: null, // 鐢ㄦ埛韬唤
+ $webSocket: null,
+ _ws_timer: null, // 瀹氭椂浠诲姟
+
+ // /**
+ // * 榛樿鏋勯�犲嚱鏁�
+ // * @constructor
+ // */
+ // WebConnection: function (){
+ // console.log("..........瀹氭椂浠诲姟");
+ // this._ws_timer = setInterval(this.timedCheckConnection, 60000);
+ // },
+
+ setInfo: function (uri, uid){
+ this.uri = uri;
+ this._uid = uid + '';
+ console.log("..........瀹氭椂浠诲姟: uid=" + this._uid);
+ this._ws_timer = setInterval(this.timedCheckConnection, 60000);
+ },
+
+ startConnect: function (){
+ if(this.uri != null && this.uri == '-1'){
+ console.log("鏈惎鐢╳ebsocket");
+ return;
+ }
+ // if(this.uri == null){
+ // getWebsocketUri().then(response => {
+ // this.uri = response.data.uri;
+ // this.uid = response.data.uid;
+ // }).catch(()=>{
+ // this.uri = null;
+ // this.uid = null;
+ // console.log("寮傚父");
+ // });
+ // }
+ if('WebSocket' in window){
+ this.$webSocket = new WebSocket(this.uri);
+ this.$webSocket.onopen = this.wsOpen;
+ this.$webSocket.onmessage = this.wsMessage;
+ this.$webSocket.onerror = this.wsError;
+ this.$webSocket.onclose = this.wsClose;
+ } else {
+ this.$webSocket = null;
+ console.log('鍒涘缓ws閿欒锛屽彲鑳藉綋鍓嶆祻瑙堝櫒涓嶆敮鎸亀ebSocket')
+ }
+ },
+
+ send: function (message){
+ if(this.$webSocket == null){
+ return;
+ }
+ if (this.$webSocket.readyState == WebSocket.OPEN) {
+ this.$webSocket.send(message);
+ } else {
+ console.log("connection is not start.");
+ }
+ },
+
+ connected: function (){
+ if(this.$webSocket == null || this.$webSocket == undefined){
+ return false;
+ }
+ if(this.$webSocket.readyState == 1){
+ // connected
+ return true;
+ }
+ return false;
+ },
+
+ wsOpen: function() {
+ // this.send(JSON.stringify({"protocol":"login", "uid":this.uid}));
+ let loginInfo = "{\"protocol\":\"login\", \"uid\":\"" + this._uid + "\"}";
+ this.send(loginInfo);
+ console.log('== websocket open ==' + this._uid);
+ },
+
+ wsClose: function (){
+ this._uid = null;
+ console.log("娴忚鍣ㄦ柇寮�杩炴帴锛�" + this._uid);
+ },
+ wsError: function(err){
+ console.log('== websocket error ==', err)
+ },
+
+ wsMessage:function(event) {
+ if(event.data == null || event.data == "" || event.data == "null"){
+// $("#showText").append("鎺ユ敹鍒版湇鍔＄绌烘暟鎹甛n");
+ console.log("鎺ユ敹鍒版湇鍔＄绌烘暟鎹甛n");
+ return;
+ }
+ this.processServerRequest(eval("("+ event.data +")"));
+ },
+
+ processServerRequest: function (data){
+ if(data == null){
+ return;
+ }
+ if(data.protocol == "heartbeat"){
+ return;
+ }
+ if(data.protocol == "login"){
+ if(data.status == 0){
+ // uid = data.uid;
+ //$("#showText").append("鏈嶅姟宸茶繛鎺ワ紝寮�濮嬫彁闂細" + data.uid + "\n");
+ console.log("娴忚鍣ㄨ繛鎺ユ垚鍔�:" + data.uid);
+ } else {
+ console.log("鐧诲綍璁よ瘉澶辫触锛�" + data.status + "\n");
+ }
+ return;
+ }
+
+ if(data.protocol == "data"){
+ console.log("鎺ユ敹鍒皐eb鎺ㄩ�侊細");
+ console.log(data.data + "\n");
+ store.commit('SET_WS_MSG', data.data);
+ // if(data.data.touch == 1){
+ // touchEvent(data.data);
+ // } else {
+ // voiceEvent(data.data);
+ // }
+ }
+ },
+
+ timedCheckConnection: function (){
+ if(this.uri != null && this.uri != "" && this.uri != undefined
+ && this._uid != null && this._uid != "" && this._uid != undefined){
+ if(this.$webSocket == null || this.$webSocket == undefined || !this.connected()){
+ console.log("閲嶆柊杩炴帴锛�" + this.uri);
+ // webConnection = new WebConnection(_wurl, _uid, null);
+ this.startConnect();
+ }
+ } else{
+ console.error("uri鎴杣id涓虹┖," + this._uid + ", " + this.uri);
+ }
+ }
+}
+
+export default WebConnection;
--
Gitblit v1.9.1