wss测试

configs/certificate/localhost.crt

+-----BEGIN CERTIFICATE-----
+MIIDnzCCAoegAwIBAgIUVi251EjohqIFfUyRClgloZiUZBIwDQYJKoZIhvcNAQEL
+BQAwXzELMAkGA1UEBhMCYXUxCzAJBgNVBAgMAmF1MQ0wCwYDVQQHDAR0aWN5MQow
+CAYDVQQKDAExMQowCAYDVQQLDAExMQowCAYDVQQDDAExMRAwDgYJKoZIhvcNAQkB
+FgExMB4XDTIzMDcwNTExMjgxN1oXDTIzMDgwNDExMjgxN1owXzELMAkGA1UEBhMC
+YXUxCzAJBgNVBAgMAmF1MQ0wCwYDVQQHDAR0aWN5MQowCAYDVQQKDAExMQowCAYD
+VQQLDAExMQowCAYDVQQDDAExMRAwDgYJKoZIhvcNAQkBFgExMIIBIjANBgkqhkiG
+9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxz3tNLj6dKuOtK1sGKkWN+fF2w312WKiB70b
+zt5NqOjVONkn7HgVqPv7dYW9OjTW4G27lrzrXMtWPrBWTydcSYd84YkJtpf4HPqd
+0coe1qkCd5pmyN6NbMOCPiKeTljjZ3duEf7ih6PoDIN/CTEUFp7+r+regsITERiE
+jhOT0R2bvYrjQrrOf6dNeK44B/TSplJ6hEPYCLPNppcCrHB8Lwl07fImDvrQddp8
+P06bGw5TmoKZybbm6nooZF6iTJ1Og9mTD884QKuimHYLzSfvkklXJ729vMO2qULR
+jwOeapl6kmEFmgwv309z+eg3bWIYU1GUjWufyNh8x/zInssxMwIDAQABo1MwUTAd
+BgNVHQ4EFgQU0wJWGDp6rvvm/rQWaedPVcQ7KmowHwYDVR0jBBgwFoAU0wJWGDp6
+rvvm/rQWaedPVcQ7KmowDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOC
+AQEAAmnp++YF0p6ZGH0BioBZojXlsm6CTQ2Q5cT0Tw39i1MQoNeocLMEqohDz8cl
+8qIBKMZiTuwzzRA8K9gtlxXI343Vkl8V1+5OEcbeYUD3KUOA1wFpYjWQzdRtpnxp
+dTLXEFomEIVoe+SGO4nO2Fqn89j1M2E8Fwnzx1SB37U+gSFTlPhWWxHKoxLQPZC1
+c8ziVPY2Gcbw/FlqWKa458vWopXr5+KhX5bLeFND3JG7aXShtRjtxezckRoMe7Js
+2mTiL3YDLm9hJtOic5XJLI3TL1Izf/3v3d6uoVWXWoAZaPFoA2xzld854h4dWJyP
+9hqGaPO7u/uvcjS8CpRMQxU8IA==
+-----END CERTIFICATE-----

configs/certificate/localhost.key

+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDHPe00uPp0q460
+rWwYqRY358XbDfXZYqIHvRvO3k2o6NU42SfseBWo+/t1hb06NNbgbbuWvOtcy1Y+
+sFZPJ1xJh3zhiQm2l/gc+p3Ryh7WqQJ3mmbI3o1sw4I+Ip5OWONnd24R/uKHo+gM
+g38JMRQWnv6v6t6CwhMRGISOE5PRHZu9iuNCus5/p014rjgH9NKmUnqEQ9gIs82m
+lwKscHwvCXTt8iYO+tB12nw/TpsbDlOagpnJtubqeihkXqJMnU6D2ZMPzzhAq6KY
+dgvNJ++SSVcnvb28w7apQtGPA55qmXqSYQWaDC/fT3P56DdtYhhTUZSNa5/I2HzH
+/MieyzEzAgMBAAECggEAVsCEgZHPX7B5RPtD12L8LSBqWmx0MRCMu3DgZE0QJG0o
+tgV7qC9LQxZgkXXHhEoQi4zMAqDEnFVe+pG+Kt3ZBZ0MR4lrJMl7u2Z2BCwNDGtv
+ixM8ENcyXfqswZBCPJvgfCMY1pYUHXpFJfm1fROVCxp0i7Vo6CdHtQhnYxNsJ78H
+XvviF3CeoO4GlIBipvvtNaIlydSYP72PQsMsnC2K8/uopB3p+OtfXAV2iaYMEIxr
+FU/gb11ef8OA66blQZAh1wUU0ey5jyMpqeib5uiUsXMOwGvYtkBc0EScSDGhESyQ
+FgP8WnedR9Vqpsj0CxPDQrH2m0ZKvCGyfw857XrhpQKBgQDnappS4bzUGwSQVi2g
+i62SZVoM6qn6sufeXMHiURRERt39/0P7nkt6iNzh63S58D18gVctrepYY77fTEWn
+QEc5nE5w2Ph/TMDsMnL7xJfXgqzJGpmBYB0SwOHzVGwT3/iys84ewSMfSZ1pyezG
+gBaH4m5dCWXCs6zMDHoejQxqtQKBgQDcaFV8WPu8EttKCHIOj/zOOUmtX1+9K4sp
+fJjbxK1d75n7De5priO7JSp44IreGSR7l/qiXoUtjxszSJbJJ5+X3IOV8+GWOw6f
+MGtoyB0DkyVusme2S1FYYJlGSdyj36pouUsEG4kyCN30UEqUDcAiT1U9OCUMNaNq
+Wt2DGu3VRwKBgQCUhVFoMiKrim+CZxy/dgW++Dc0JQNUt6+igauZoWm9bDIbStIJ
+0g0lJmOEx0XR9AKyPpyB36WQduvQijYF4nYT3mJlgIrzwIHs1XAAb6r4EJDuPJka
+dGIUYCBjt+HpW4xUvJtkF5aABRH3DDZfK2PKcCNeqKJbtE8JYlSZ+PJoJQKBgQCT
+QpZTJXTT/NlNBoWGG0fyVS5XytBBqPUqu9e5hhe7GloL9gvjyfiPkk5lQskliTDp
+7uoDUBm1DddDlW1BatrjcO7t4mtHn5+uVoB9Gq7f85Ff+4z1rC7mWGwwHStwxgCq
+RZrMXMV2i5wYHwklEGbdxZmS9I80MCZF6f30GarsAwKBgBFzfywx1+RiarcMO4iS
+4FWY/93/5fhVm/MiutgQlfYkdnhjGa91+E3eucdgIQX23Ol49i0S149LdF95KEmU
+SJE5+xmwFQYQ972a46wzp29QTKaA62Q6Fvjp21BTbFQWirOrfg9712e002eRPf73
+hnOOHp6EeK4iLJokbMOraJH9
+-----END PRIVATE KEY-----

nuxt.config.js

+import path from 'path'
+import fs from 'fs'
 const { resolve } = require('path')
 require('./configs')
 
@@ -19,7 +21,7 @@ export default {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
     ],
     script: [
-      { src: `http://magic-hand.cy-dev.com/jswebrtc.min.js`, ssr: false },
+      { src: `https://magic-hand.cy-dev.com/jswebrtc.min.js`, ssr: false },
     ],
   },
   env: process.env,
@@ -97,6 +99,12 @@ export default {
       })
     }
   },
+  server: {
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, 'configs/certificate/localhost.key')),
+      cert: fs.readFileSync(path.resolve(__dirname, 'configs/certificate/localhost.crt'))
+    }
+  },
   // axios: {
   //   // baseURL,
   //   proxy: true, // 表示开启代理

package-lock.json

@@ -13984,6 +13984,14 @@
       "resolved": "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.1.0.tgz",
       "integrity": "sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -30,6 +30,7 @@
     "screenfull": "^4.2.1",
     "vod-js-sdk-v6": "^1.4.12",
     "vue-baidu-map": "^0.21.22",
+    "vue-clipboard2": "^0.3.3",
     "vuex-persistedstate": "^3.2.1",
     "vxe-table": "^3.4.15",
     "xe-utils": "^3.5.4"

pages/index.vue

@@ -27,12 +27,17 @@ export default {
   computed: {
     ...mapState([
       'relist',
+      'userInfo',
+      'token',
     ]),
   },
   watch: {
     relist() {
       this.$router.replace(`/login`)
     },
+    userInfo() {
+      this.init().im()
+    },
   },
   mounted() {
     this.GetBaseInfo()
@@ -44,6 +49,61 @@ export default {
       'GetBaseInfo',
       'GetDeviceList',
     ]),
+    init() {
+      return {
+        im: () => {
+          const { userInfo, token, } = this
+          const { id } = userInfo
+          this.network().getOpenimInfo().then(({ data }) => {
+            console.log('data', data)
+            const config = {
+              userID: id, // 用户ID
+              token: token, // 用户token
+              url: data.imWsServer, // jssdk server ws地址
+              platformID: 5, // 平台号
+            }
+
+            console.log('config', config)
+
+            openIM.login(config).then(res => {
+              this.loginStatus = true
+              console.log('login suc...', res)
+
+              // me.startListenIM()
+
+              // if(me.initUserId) {
+              //   me.handleNewConversation(me.initUserId)
+              // }
+            }).catch(err => {
+              this.loginStatus = false
+              this.$message.error('login to openIM failed')
+              console.log('login failed...', err)
+            })
+          })
+          // const config = {
+          //   userID: openIMConfig.openImId,                                // 用户ID
+          //   token: openIMConfig.openImToken,                                    // 用户token
+          //   url: openIMConfig.wsUrl,    // jssdk server ws地址
+          //   platformID: openIMConfig.platformID,                                    // 平台号
+          // }
+
+          // openIM.login(config).then(res => {
+          //   this.loginStatus = true
+          //   console.log('login suc...', res)
+
+          //   // me.startListenIM()
+
+          //   // if(me.initUserId) {
+          //   //   me.handleNewConversation(me.initUserId)
+          //   // }
+          // }).catch(err => {
+          //   this.loginStatus = false
+          //   this.$message.error('login to openIM failed')
+          //   console.log('login failed...', err)
+          // })
+        },
+      }
+    },
     network() {
       return {
         isGaming: () => {
@@ -63,6 +123,14 @@ export default {
             }
           })
         },
+        // 获取im信息
+        getOpenimInfo: () => {
+          const url = '/api/openim/info'
+          return this.$request({
+            url,
+            method: 'get',
+          })
+        },
       }
     },
   },

pages/test.vue

 <template>
-  <div>
-    test
+  <div class="main">
+    <div v-clipboard:copy="src" v-clipboard:success="onCopy" v-for="(src, index) in imagesJson" :key="index" class="box">
+      <!-- {{ src }} -->
+      <img :src="src" width="200px" class="img" >
+    </div>
   </div>
 </template>
 
 <script>
+import {
+  Message,
+} from 'element-ui'
+import imagesJson from '@/assets/data/oldimages.json'
 export default {
   components: {
   },
@@ -12,8 +19,30 @@ export default {
     return {
       image: '',
       imageList: '',
+      imagesJson,
     }
   },
-  methods: {},
+  methods: {
+    onCopy() {
+      Message({
+        message: '复制成功！',
+        type: 'success',
+      })
+    },
+  },
 }
 </script>
+
+<style lang="scss" scoped>
+.main {
+  color: white;
+  height: 100%;
+  overflow: auto;
+}
+.box {
+  display: inline-block;
+}
+.img {
+  display: inline-block;
+}
+</style>

plugins/plugins.js

 import Vue from 'vue'
-import indexMixins from '@/mixins/index.js'
+
+import indexMixins from '@/mixins/index.js' // 全局混入
 Vue.mixin(indexMixins)
 
+import VueClipboard from 'vue-clipboard2' // 复制组件
+Vue.use(VueClipboard) // 复制组件
+
 Vue.filter('img', function(value) {
   return `${process.env.img_domain}${value}`
 })

store/index.js

@@ -20,7 +20,7 @@ import {
   SET_CONFIG,
 } from '@/store/mutation-types'
 import { treeData } from '@/utils/tool'
-import { setToken, removeToken, setUserData } from '@/utils/auth' // 验权
+import { getToken, removeToken, setUserData } from '@/utils/auth' // 验权
 
 export const state = () => ({
   relist: false, // 重新登录
@@ -32,6 +32,7 @@ export const state = () => ({
   authBtnIdList: [], // 权限按钮id列表
   deviceList: [], // 设备列表
   device: {}, // 当前设备
+  token: getToken(),
   zoom: 1, // 当前屏幕缩放比例
   innerWidth: window.innerWidth,
   innerHeight: window.innerHeight,