im-ui更名为im-web

.gitignore

@@ -9,10 +9,10 @@
 /im-server/src/main/resources/logback-prod.xml
 /im-commom/im-commom.iml
 /im-uniapp/node_modules/
-/im-ui/package-lock.json
+/im-web/package-lock.json
 /im-uniapp/unpackage/
 /im-uniapp/hybrid/
 /im-uniapp/package-lock.json
-/im-ui/src/components/rtc/LocalVideo.vue
+/im-web/src/components/rtc/LocalVideo.vue
-/im-ui/src/components/rtc/RemoteVideo.vue
+/im-web/src/components/rtc/RemoteVideo.vue
-/im-ui/src/components/rtc/RtcGroupAcceptor.vue
+/im-web/src/components/rtc/RtcGroupAcceptor.vue

im-ui/.gitignore

@@ -1,26 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# 
-package-lock.json

im-ui/README.md → im-web/README.md

@@ -1,24 +1,24 @@
-# web
+# web
-
+
-## Project setup
+## Project setup
-```
+```
-npm install
+npm install
-```
+```
-
+
-### Compiles and hot-reloads for development
+### Compiles and hot-reloads for development
-```
+```
-npm run serve
+npm run serve
-```
+```
-
+
-### Compiles and minifies for production
+### Compiles and minifies for production
-```
+```
-npm run build
+npm run build
-```
+```
-
+
-### Lints and fixes files
+### Lints and fixes files
-```
+```
-npm run lint
+npm run lint
-```
+```
-
+
-### Customize configuration
+### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+See [Configuration Reference](https://cli.vuejs.org/config/).

im-ui/babel.config.js → im-web/babel.config.js

@@ -1,5 +1,5 @@
-module.exports = {
+module.exports = {
-  presets: [
+  presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset'
-  ]
+  ]
-}
+}

im-ui/package.json → im-web/package.json

@@ -1,63 +1,63 @@
-{
+{
-  "name": "boxim",
+  "name": "boxim",
-  "version": "0.1.0",
+  "version": "0.1.0",
-  "private": true,
+  "private": true,
-  "scripts": {
+  "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
-    "build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "axios": "^1.1.3",
+    "axios": "^1.1.3",
-    "core-js": "^3.6.5",
+    "core-js": "^3.6.5",
-    "element-ui": "^2.15.10",
+    "element-ui": "^2.15.10",
-    "js-audio-recorder": "^1.0.7",
+    "js-audio-recorder": "^1.0.7",
-    "localforage": "^1.10.0",
+    "localforage": "^1.10.0",
-    "sass": "^1.47.0",
+    "sass": "^1.47.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^10.1.1",
-    "vue": "^2.6.11",
+    "vue": "^2.6.11",
-    "vue-axios": "^3.5.0",
+    "vue-axios": "^3.5.0",
-    "vue-router": "^3.3.3",
+    "vue-router": "^3.3.3",
-    "vuex": "^3.6.2",
+    "vuex": "^3.6.2",
-    "vuex-persist": "^3.1.3"
+    "vuex-persist": "^3.1.3"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.12",
+    "@vue/cli-plugin-babel": "~4.5.12",
-    "@vue/cli-plugin-eslint": "~4.5.12",
+    "@vue/cli-plugin-eslint": "~4.5.12",
-    "@vue/cli-service": "~4.5.12",
+    "@vue/cli-service": "~4.5.12",
-    "babel-eslint": "^10.1.0",
+    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11"
-  },
+  },
-  "eslintConfig": {
+  "eslintConfig": {
-    "root": true,
+    "root": true,
-    "env": {
+    "env": {
-      "node": true
+      "node": true
-    },
+    },
-    "extends": [
+    "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended"
-    ],
+    ],
-    "parserOptions": {
+    "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "babel-eslint"
-    },
+    },
-    "rules": {
+    "rules": {
-      "no-mixed-spaces-and-tabs": 0,
+      "no-mixed-spaces-and-tabs": 0,
-      "generator-star-spacing": "off",
+      "generator-star-spacing": "off",
-      "no-tabs": "off",
+      "no-tabs": "off",
-      "no-unused-vars": "off",
+      "no-unused-vars": "off",
-      "no-unused-labels": "off",
+      "no-unused-labels": "off",
-      "no-console": "off",
+      "no-console": "off",
-      "vue/no-unused-components": "off",
+      "vue/no-unused-components": "off",
-      "no-irregular-whitespace": "off",
+      "no-irregular-whitespace": "off",
-      "no-debugger": "off",
+      "no-debugger": "off",
-      "no-useless-escape": "off"
+      "no-useless-escape": "off"
-    }
+    }
-  },
+  },
-  "browserslist": [
+  "browserslist": [
-    "> 1%",
+    "> 1%",
-    "last 2 versions",
+    "last 2 versions",
-    "not dead"
+    "not dead"
-  ]
+  ]
-}
+}

im-ui/public/index.html → im-web/public/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="">
+<html lang="">
-  <head>
+  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>logo.png">
+    <link rel="icon" href="<%= BASE_URL %>logo.png">
-    <title>盒子IM</title>
+    <title>盒子IM</title>
-  </head>
+  </head>
-  <body>
+  <body>
-    <div id="app"></div>
+    <div id="app"></div>
-  </body>
+  </body>
-</html>
+</html>

im-ui/src/App.vue → im-web/src/App.vue

@@ -1,115 +1,115 @@
-<template>
+<template>
-	<div id="app">
+	<div id="app">
-		<router-view></router-view>
+		<router-view></router-view>
-	</div>
+	</div>
-</template>
+</template>
-
+
-<script>
+<script>
-	export default {
+	export default {
-		name: 'App',
+		name: 'App',
-		components: {}
+		components: {}
-	}
+	}
-</script>
+</script>
-
+
-<style lang="scss">
+<style lang="scss">
-@import './assets/style/global.css';
+@import './assets/style/global.css';
-
+
-#app {
+#app {
-	font-family: 'Avenir', Helvetica, Arial, sans-serif;
+	font-family: 'Avenir', Helvetica, Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
-	position: absolute;
+	position: absolute;
-	height: 100%;
+	height: 100%;
-	width: 100%;
+	width: 100%;
-}
+}
-
+
-.el-message {
+.el-message {
-	z-index: 99999999 !important;
+	z-index: 99999999 !important;
-}
+}
-
+
-.el-scrollbar__thumb {
+.el-scrollbar__thumb {
-	background-color: #A0A8AF !important;
+	background-color: #A0A8AF !important;
-}
+}
-
+
-.el-dialog {
+.el-dialog {
-	border-radius: 8px !important;
+	border-radius: 8px !important;
-	overflow: hidden !important;
+	overflow: hidden !important;
-}
+}
-
+
-.el-dialog__header {
+.el-dialog__header {
-	background-color: #5870e6 !important;
+	background-color: #5870e6 !important;
-	
+	
-}
+}
-
+
-.el-dialog__title {
+.el-dialog__title {
-	color: #f8f8f8 !important;
+	color: #f8f8f8 !important;
-}
+}
-
+
-.el-dialog__close {
+.el-dialog__close {
-	color: white !important;
+	color: white !important;
-	font-size: 20px;
+	font-size: 20px;
-}
+}
-
+
-.el-checkbox__inner {
+.el-checkbox__inner {
-	border-radius: 50% !important;
+	border-radius: 50% !important;
-}
+}
-
+
-.el-input__inner {
+.el-input__inner {
-	border-radius: 5px !important;
+	border-radius: 5px !important;
-	border: #587FF0 1px solid !important;
+	border: #587FF0 1px solid !important;
-}
+}
-
+
-.el-textarea__inner{
+.el-textarea__inner{
-	border-radius: 5px !important;
+	border-radius: 5px !important;
-	border: #587FF0 1px solid !important;
+	border: #587FF0 1px solid !important;
-}
+}
-
+
-.el-icon-search {
+.el-icon-search {
-	color:#587FF0 !important;
+	color:#587FF0 !important;
-}
+}
-
+
 .el-button--primary {
-    background-color: #687Ff0 !important;
+    background-color: #687Ff0 !important;
-	border-color: #687Ff0 !important;
+	border-color: #687Ff0 !important;
-}
+}
-
+
-.el-button--success {
+.el-button--success {
-	background-color: #4cae1b !important;
+	background-color: #4cae1b !important;
-	border-color: #4cae1b !important;
+	border-color: #4cae1b !important;
-}
+}
-.el-button--danger {
+.el-button--danger {
-	background-color: #ea4949 !important;
+	background-color: #ea4949 !important;
-	border-color: #ea4949 !important;
+	border-color: #ea4949 !important;
-}
+}
-
+
-.el-button {
+.el-button {
-	padding: 8px 15px !important;
+	padding: 8px 15px !important;
-}
+}
-
+
-.el-checkbox {
+.el-checkbox {
-	display: flex;
+	display: flex;
-	align-items: center;
+	align-items: center;
-
+
-	//修改选中框的大小
+	//修改选中框的大小
-	.el-checkbox__inner {
+	.el-checkbox__inner {
-		width: 20px;
+		width: 20px;
-		height: 20px;
+		height: 20px;
-
+
-		//修改选中框中的对勾的大小和位置
+		//修改选中框中的对勾的大小和位置
-		&::after {
+		&::after {
-			height: 12px;
+			height: 12px;
-			left: 7px;
+			left: 7px;
-		}
+		}
-	}
+	}
-
+
-	//修改点击文字颜色不变
+	//修改点击文字颜色不变
-	.el-checkbox__input.is-checked+.el-checkbox__label {
+	.el-checkbox__input.is-checked+.el-checkbox__label {
-		color: #333333;
+		color: #333333;
-	}
+	}
-
+
-	.el-checkbox__label {
+	.el-checkbox__label {
-		line-height: 20px;
+		line-height: 20px;
-		padding-left: 8px;
+		padding-left: 8px;
-	}
+	}
-}
+}
 </style>

im-ui/src/api/wssocket.js → im-web/src/api/wssocket.js

@@ -1,145 +1,145 @@
-var websock = null;
+var websock = null;
-let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
+let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
-let isConnect = false; //连接标识 避免重复连接
+let isConnect = false; //连接标识 避免重复连接
-let connectCallBack= null;
+let connectCallBack= null;
-let messageCallBack = null;
+let messageCallBack = null;
-let closeCallBack = null
+let closeCallBack = null
-
+
-
+
-let connect = (wsurl,accessToken) => {
+let connect = (wsurl,accessToken) => {
-	try {
+	try {
-		if (isConnect) {
+		if (isConnect) {
-			return;
+			return;
-		}
+		}
-		console.log("连接WebSocket");
+		console.log("连接WebSocket");
-		websock = new WebSocket(wsurl); 
+		websock = new WebSocket(wsurl); 
-		websock.onmessage = function(e) {
+		websock.onmessage = function(e) {
-			let sendInfo = JSON.parse(e.data)
+			let sendInfo = JSON.parse(e.data)
-			if (sendInfo.cmd == 0) {	
+			if (sendInfo.cmd == 0) {	
-				heartCheck.start()
+				heartCheck.start()
-				// 登录成功才算真正完成连接
+				// 登录成功才算真正完成连接
-				connectCallBack && connectCallBack();
+				connectCallBack && connectCallBack();
-				console.log('WebSocket登录成功')
+				console.log('WebSocket登录成功')
-			} else if (sendInfo.cmd == 1) {
+			} else if (sendInfo.cmd == 1) {
-				// 重新开启心跳定时
+				// 重新开启心跳定时
-				heartCheck.reset();
+				heartCheck.reset();
-			} else {
+			} else {
-				// 其他消息转发出去
+				// 其他消息转发出去
-				console.log("收到消息:",sendInfo);  
+				console.log("收到消息:",sendInfo);  
-				messageCallBack && messageCallBack(sendInfo.cmd, sendInfo.data)
+				messageCallBack && messageCallBack(sendInfo.cmd, sendInfo.data)
-			}
+			}
-		}
+		}
-		websock.onclose = function(e) {
+		websock.onclose = function(e) {
-			console.log('WebSocket连接关闭')
+			console.log('WebSocket连接关闭')
-			isConnect = false; //断开后修改标识
+			isConnect = false; //断开后修改标识
-			closeCallBack && closeCallBack(e);
+			closeCallBack && closeCallBack(e);
-		}
+		}
-		websock.onopen = function() {
+		websock.onopen = function() {
-			console.log("WebSocket连接成功");
+			console.log("WebSocket连接成功");
-			isConnect = true;
+			isConnect = true;
-			// 发送登录命令
+			// 发送登录命令
-			let loginInfo = {
+			let loginInfo = {
-				cmd: 0,
+				cmd: 0,
-				data: {
+				data: {
-					accessToken: accessToken
+					accessToken: accessToken
-				}
+				}
-			};
+			};
-			websock.send(JSON.stringify(loginInfo));
+			websock.send(JSON.stringify(loginInfo));
-		}
+		}
-
+
-		// 连接发生错误的回调方法
+		// 连接发生错误的回调方法
-		websock.onerror = function() {
+		websock.onerror = function() {
-			console.log('WebSocket连接发生错误')
+			console.log('WebSocket连接发生错误')
-			isConnect = false; //连接断开修改标识
+			isConnect = false; //连接断开修改标识
-			reconnect(wsurl,accessToken);
+			reconnect(wsurl,accessToken);
-		}
+		}
-	} catch (e) {
+	} catch (e) {
-		console.log("尝试创建连接失败");
+		console.log("尝试创建连接失败");
-		reconnect(wsurl,accessToken); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
+		reconnect(wsurl,accessToken); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
-	}
+	}
-};
+};
-
+
-//定义重连函数
+//定义重连函数
-let reconnect = (wsurl,accessToken) => {
+let reconnect = (wsurl,accessToken) => {
-	console.log("尝试重新连接");
+	console.log("尝试重新连接");
-	if (isConnect){
+	if (isConnect){
-		//如果已经连上就不在重连了
+		//如果已经连上就不在重连了
-		return; 
+		return; 
-	}
+	}
-	rec && clearTimeout(rec);
+	rec && clearTimeout(rec);
-	rec = setTimeout(function() { // 延迟5秒重连  避免过多次过频繁请求重连
+	rec = setTimeout(function() { // 延迟5秒重连  避免过多次过频繁请求重连
-		connect(wsurl,accessToken);
+		connect(wsurl,accessToken);
-	}, 15000);
+	}, 15000);
-};
+};
-//设置关闭连接
+//设置关闭连接
-let close = (code) => {
+let close = (code) => {
-	websock && websock.close(code);
+	websock && websock.close(code);
-};
+};
-
+
-
+
-//心跳设置
+//心跳设置
-let heartCheck = {
+let heartCheck = {
-	timeout: 5000, //每段时间发送一次心跳包 这里设置为20s
+	timeout: 5000, //每段时间发送一次心跳包 这里设置为20s
-	timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
+	timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
-	start: function() {
+	start: function() {
-		if (isConnect) {
+		if (isConnect) {
-			console.log('发送WebSocket心跳')
+			console.log('发送WebSocket心跳')
-			let heartBeat = {
+			let heartBeat = {
-				cmd: 1,
+				cmd: 1,
-				data: {}
+				data: {}
-			};
+			};
-			websock.send(JSON.stringify(heartBeat))
+			websock.send(JSON.stringify(heartBeat))
-		}
+		}
-	},
+	},
-
+
-	reset: function() {
+	reset: function() {
-		clearTimeout(this.timeoutObj);
+		clearTimeout(this.timeoutObj);
-		this.timeoutObj = setTimeout(function() {
+		this.timeoutObj = setTimeout(function() {
-			heartCheck.start();
+			heartCheck.start();
-		}, this.timeout);
+		}, this.timeout);
-
+
-	}
+	}
-};
+};
-
+
-
+
-
+
-// 实际调用的方法
+// 实际调用的方法
-let sendMessage = (agentData) => {
+let sendMessage = (agentData) => {
-	if (websock.readyState === websock.OPEN) {
+	if (websock.readyState === websock.OPEN) {
-		// 若是ws开启状态
+		// 若是ws开启状态
-		websock.send(JSON.stringify(agentData))
+		websock.send(JSON.stringify(agentData))
-	} else if (websock.readyState === websock.CONNECTING) {
+	} else if (websock.readyState === websock.CONNECTING) {
-		// 若是 正在开启状态，则等待1s后重新调用
+		// 若是 正在开启状态，则等待1s后重新调用
-		setTimeout(function() {
+		setTimeout(function() {
-			sendMessage(agentData)
+			sendMessage(agentData)
-		}, 1000)
+		}, 1000)
-	} else {
+	} else {
-		// 若未开启 ，则等待1s后重新调用
+		// 若未开启 ，则等待1s后重新调用
-		setTimeout(function() {
+		setTimeout(function() {
-			sendMessage(agentData)
+			sendMessage(agentData)
-		}, 1000)
+		}, 1000)
-	}
+	}
-}
+}
-
+
-let onConnect = (callback) => {
+let onConnect = (callback) => {
-	connectCallBack = callback;
+	connectCallBack = callback;
-}
+}
-
+
-let onMessage = (callback) => {
+let onMessage = (callback) => {
-	messageCallBack = callback;
+	messageCallBack = callback;
-}
+}
-
+
-
+
-let onClose = (callback) => {
+let onClose = (callback) => {
-	closeCallBack = callback;
+	closeCallBack = callback;
-}
+}
-// 将方法暴露出去
+// 将方法暴露出去
-export {
+export {
-	connect,
+	connect,
-	reconnect,
+	reconnect,
-	close,
+	close,
-	sendMessage,
+	sendMessage,
-	onConnect,
+	onConnect,
-	onMessage,
+	onMessage,
-	onClose,
+	onClose,
-}
+}

im-ui/src/assets/style/global.css → im-web/src/assets/style/global.css

@@ -1,43 +1,43 @@
-@charset "UTF-8";
+@charset "UTF-8";
-
+
-html {
+html {
-  height: 100%;
+  height: 100%;
-  overflow: hidden;
+  overflow: hidden;
-       
+       
-}
+}
-
+
-body {
+body {
-  height: 100%;
+  height: 100%;
-  margin: 0;
+  margin: 0;
-  overflow: hidden;
+  overflow: hidden;
-
+
-}
+}
-
+
-section {
+section {
-	  height: 100%;
+	  height: 100%;
-}
+}
-
+
-.el-dialog__body{
+.el-dialog__body{
-	padding: 10px 15px !important;
+	padding: 10px 15px !important;
-}
+}
-
+
-::-webkit-scrollbar {
+::-webkit-scrollbar {
-  width: 6px;
+  width: 6px;
-  height: 1px;
+  height: 1px;
-}
+}
-
+
-::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
+  /*滚动条里面小方块*/
-  border-radius: 2px;
+  border-radius: 2px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #535353;
+  background: #535353;
-}
+}
-
+
-::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
+  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
+  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 2px;
+  border-radius: 2px;
-  background: #ededed;
+  background: #ededed;
-}
+}
-
+
-/*# sourceMappingURL=v-im.cssss.map */
+/*# sourceMappingURL=v-im.cssss.map */