{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/childComps/DetailChat.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/childComps/DetailChat.vue","mtime":1620201988277},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBOYXZCYXIgZnJvbSAiQC9jb21wb25lbnRzL2NvbW1vbi9uYXZiYXIvTmF2QmFyIjsKaW1wb3J0IFNjcm9sbCBmcm9tICJAL2NvbXBvbmVudHMvY29tbW9uL1Njcm9sbC9TY3JvbGwudnVlIjsKCmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAiRGV0YWlsQ2hhdCIsCiAgY29tcG9uZW50czogewogICAgTmF2QmFyLAogICAgU2Nyb2xsCiAgfSwKICBkYXRhKCkgewogICAgcmV0dXJuIHsKICAgICAgY29udGVudDogIiIsCiAgICAgIG1lc3NhZ2U6ICIiLAogICAgICBsaXN0czogW10sCiAgICAgIHdzOiB7fSwKICAgICAgbmFtZTogIiIsCiAgICAgIG51bTogMCwKICAgICAgaXNzaG93OiB0cnVlLAogICAgICBpc21lOiBmYWxzZSwKICAgICAgcm9vbWlkOiAxLAogICAgICB1aWQ6ICIiLAogICAgICBoYW5kbGU6IHt9LAogICAgICB0b2tlbjogIiIKICAgIH07CiAgfSwKICB1cGRhdGVkKCkge30sCiAgY3JlYXRlZCgpIHsKICAgIHRoaXMudG9rZW4gPSB3aW5kb3cubG9jYWxTdG9yYWdlLmdldEl0ZW0oInRva2VuIik7CiAgICBpZiAoIXRoaXMudG9rZW4pIHsKICAgICAgdGhpcy4kcm91dGVyLnB1c2goIi9sb2dpbiIpOwogICAgfQogIH0sCiAgbWV0aG9kczogewogICAgZm9yYmlkTW92ZSgpIHsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiI2lucHV0SW5mbyIpLnNjcm9sbEludG9WaWV3KGZhbHNlKTsKICAgIH0sCiAgICBmb3JtZGF0YShkYXRlKSB7CiAgICAgIHJldHVybiB0aGlzLiRtb21lbnQoZGF0ZSkuZnJvbU5vdygpOwogICAgfSwKICAgIGdldEF2YXRhcih1aWQpIHsKICAgICAgcmV0dXJuICJodHRwOi8vNDcuMTA4LjE1My4zMDo4MDAxL3VzZXJzLyIgKyB1aWQgKyAiL2F2YXRhciI7CiAgICB9LAogICAgYmFja0NsaWNrKCkgewogICAgICB0aGlzLndzLmNsb3NlKCk7CiAgICAgIHRoaXMuJHJvdXRlci5iYWNrKCk7CiAgICB9LAogICAgbG9hZE1vcmUoKSB7CiAgICAgIHRoaXMuJHJlZnMuc2Nyb2xsLnJlZnJlc2goKTsKICAgIH0sCiAgICBwdWxsaW5nRG93bigpIHsKICAgICAgdGhpcy5wdWxsaW5nZG93biA9IHRydWU7CiAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgIHRoaXMucHVsbGluZ2Rvd24gPSBmYWxzZTsKICAgICAgICB0aGlzLiRyZWZzLnNjcm9sbC5maW5pc2hQdWxsRG93bigpOwogICAgICB9LCAzMDApOwogICAgfSwKICAgIGluaXQoKSB7CiAgICAgIHRoaXMud3MgPSBuZXcgV2ViU29ja2V0KCJ3czovLzQ3LjEwOC4xNTMuMzA6ODAwMi8iKTsKICAgICAgdGhpcy53cy5vbm9wZW4gPSB0aGlzLm9uT3BlbjsKICAgICAgdGhpcy53cy5vbm1lc3NhZ2UgPSB0aGlzLm9uTWVzc2FnZTsKICAgICAgdGhpcy53cy5vbmNsb3NlID0gdGhpcy5vbkNsb3NlOwogICAgICB0aGlzLndzLm9uZXJyb3IgPSB0aGlzLm9uRXJyb3I7CiAgICB9LAogICAgZW50ZXIoKSB7CiAgICAgIGlmICh0aGlzLm5hbWUudHJpbSgpID09PSAiIikgewogICAgICAgIHRoaXMuJHJvdXRlci5wdXNoKCIvbG9naW4iKTsKICAgICAgfQogICAgICB0aGlzLmluaXQoKTsKICAgICAgdGhpcy5pc1Nob3cgPSBmYWxzZTsKICAgIH0sCiAgICBvbk9wZW46IGZ1bmN0aW9uKCkgewogICAgICAvLyBjb25zb2xlLmxvZygnb3BlbjonICsgdGhpcy53cy5yZWFkeVN0YXRlKTsKICAgICAgLy93cy5zZW5kKCdIZWxsbyBmcm8sbSBjbGllbnQhJykKICAgICAgLy8g5Y+R6LW36Ym05p2D6K+35rGCCiAgICAgIC8vdGhpcy53cy5zZW5kKEpTT04uc3RyaW5naWZ5KHsKICAgICAgLy8gIGV2ZW50OiAnYXV0aCcsCiAgICAgIC8vICBtZXNzYWdlOiAvLydleUpoYkdjaU9pSklVekkxTmlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKemRXSWlPaUl4Ly9Nak0wTlRZM09Ea3dJaXdpYm1GdFpTSTZJa3B2YUc0Z1JHOWxJaXdpYVdGMElqb3hOVC8vRTJNak01TURJeWZRLi8vWGJQZmJJSE1JNmFyWjNZOTIyQmhqV2dReldYY1hOcnowb2d0VmhmRWQybycKICAgICAgLy99KSkKICAgICAgdGhpcy53cy5zZW5kKAogICAgICAgIEpTT04uc3RyaW5naWZ5KHsKICAgICAgICAgIGV2ZW50OiAiZW50ZXIiLAogICAgICAgICAgbWVzc2FnZTogdGhpcy5uYW1lLAogICAgICAgICAgcm9vbWlkOiB0aGlzLnJvb21pZCwKICAgICAgICAgIHVpZDogdGhpcy51aWQsCiAgICAgICAgICBkYXRlOiBuZXcgRGF0ZSgpCiAgICAgICAgfSkKICAgICAgKTsKICAgIH0sCiAgICBvbk1lc3NhZ2U6IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgIC8vIOW9k+eUqOaIt+acqui/m+WFpeiBiuWkqeWupO+8jOWImeS4jeaOpeaUtua2iOaBrwogICAgICBpZiAodGhpcy5pc1Nob3cpIHsKICAgICAgICByZXR1cm47CiAgICAgIH0KICAgICAgLy8g5o6l5pS25pyN5Yqh56uv5Y+R6YCB6L+H5p2l55qE5raI5oGvCiAgICAgIHZhciBvYmogPSBKU09OLnBhcnNlKGV2ZW50LmRhdGEpOwogICAgICBzd2l0Y2ggKG9iai5ldmVudCkgewogICAgICAgIGNhc2UgImVudGVyIjoKICAgICAgICAgIC8vIOW9k+acieS4gOS4quaWsOeahOeUqOaIt+i/m+WFpeiBiuWkqeWupAogICAgICAgICAgb2JqLnNpemUgPSAwOwogICAgICAgICAgdGhpcy5saXN0cy5wdXNoKG9iaik7CiAgICAgICAgICBicmVhazsKICAgICAgICBjYXNlICJvdXQiOgogICAgICAgICAgb2JqLnNpemUgPSAzOwogICAgICAgICAgdGhpcy5saXN0cy5wdXNoKG9iaik7CiAgICAgICAgICBicmVhazsKICAgICAgICBjYXNlICJoZWFydGJlYXQiOgogICAgICAgICAgLy8gdGhpcy5jaGVja1NlcnZlcigpOyAvLyB0aW1lSW50ZXJ2YWwgKyB0CiAgICAgICAgICAvLyDlj6/ku6Xms6jph4rmjonku6XkuIvlv4Pot7PnirbmgIHvvIzkuLvliqjmtYvor5XmnI3liqHnq6/mmK/lkKbkvJrmlq3lvIDlrqLmiLfnq6/nmoTov57mjqUKICAgICAgICAgIHRoaXMud3Muc2VuZCgKICAgICAgICAgICAgSlNPTi5zdHJpbmdpZnkoewogICAgICAgICAgICAgIGV2ZW50OiAiaGVhcnRiZWF0IiwKICAgICAgICAgICAgICBtZXNzYWdlOiAicG9uZyIKICAgICAgICAgICAgfSkKICAgICAgICAgICk7CiAgICAgICAgICBicmVhazsKICAgICAgICBkZWZhdWx0OgogICAgICAgICAgaWYgKG9iai5uYW1lICE9PSB0aGlzLm5hbWUpIHsKICAgICAgICAgICAgb2JqLnNpemUgPSAyOwogICAgICAgICAgICAvLyDmjqXmlLbmraPluLjnmoTogYrlpKkKICAgICAgICAgICAgdGhpcy5saXN0cy5wdXNoKG9iaik7CiAgICAgICAgICB9CiAgICAgIH0KICAgICAgdGhpcy5udW0gPSBvYmoubnVtOwogICAgICB0aGlzLiRuZXh0VGljaygoKSA9PiB7CiAgICAgICAgbGV0IExpcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoImxpIik7IC8vIOafpeaJvuaJgOaciWxp5YWD57SgCiAgICAgICAgaWYgKAogICAgICAgICAgTGlzW0xpcy5sZW5ndGggLSAxXS5vZmZzZXRUb3AgKyA0OSA+CiAgICAgICAgICB0aGlzLiRyZWZzLnNjcm9sbC4kZWwuY2xpZW50SGVpZ2h0CiAgICAgICAgKSB7CiAgICAgICAgICBjb25zdCBoZWlnaHQgPQogICAgICAgICAgICBMaXNbTGlzLmxlbmd0aCAtIDFdLm9mZnNldFRvcCArCiAgICAgICAgICAgIDQ5IC0KICAgICAgICAgICAgdGhpcy4kcmVmcy5zY3JvbGwuJGVsLmNsaWVudEhlaWdodDsKICAgICAgICAgIHRoaXMuJHJlZnMuc2Nyb2xsLnNjcm9sbFRvKDAsIC1oZWlnaHQsIDEwMCk7CiAgICAgICAgICB0aGlzLiRyZWZzLnNjcm9sbC5yZWZyZXNoKCk7CiAgICAgICAgfQogICAgICB9LCAwKTsKICAgIH0sCiAgICBvbkNsb3NlKCkgewogICAgICAvLyDlvZPpk77mjqXkuLvliqjmlq3lvIDnmoTml7blgJnop6blj5FjbG9zZeS6i+S7tgogICAgICB0aGlzLndzLmNsb3NlKCk7CiAgICB9LAogICAgb25FcnJvcigpIHsKICAgICAgLy8g5b2T6L+e5o6l5aSx6LSl5pe277yM6Kem5Y+RZXJyb3Lkuovku7YKICAgICAgLy8g6L+e5o6l5aSx6LSl5LmL5ZCO77yMMXPov5vooYzmlq3nur/ph43ov57vvIEKICAgICAgdmFyIF90aGlzID0gdGhpczsKICAgICAgc2V0VGltZW91dChmdW5jdGlvbigpIHsKICAgICAgICBfdGhpcy5pbml0KCk7CiAgICAgIH0sIDEwMDApOwogICAgfSwKICAgIC8vIOWPkemAgea2iOaBrwogICAgc2VuZCgpIHsKICAgICAgdmFyIG1pbmVtc2cgPSB7CiAgICAgICAgbmFtZTogdGhpcy5uYW1lLAogICAgICAgIG1lc3NhZ2U6IHRoaXMubWVzc2FnZSwKICAgICAgICBzaXplOiAxLAogICAgICAgIGRhdGU6IG5ldyBEYXRlKCksCiAgICAgICAgdWlkOiB0aGlzLnVpZAogICAgICB9OwogICAgICB0aGlzLmxpc3RzLnB1c2gobWluZW1zZyk7CiAgICAgIHRoaXMuJG5leHRUaWNrKCgpID0+IHsKICAgICAgICBsZXQgTGlzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgibGkiKTsgLy8g5p+l5om+5omA5pyJbGnlhYPntKAKICAgICAgICBpZiAoCiAgICAgICAgICBMaXNbTGlzLmxlbmd0aCAtIDFdLm9mZnNldFRvcCArIDQ5ID4KICAgICAgICAgIHRoaXMuJHJlZnMuc2Nyb2xsLiRlbC5jbGllbnRIZWlnaHQKICAgICAgICApIHsKICAgICAgICAgIGNvbnN0IGhlaWdodCA9CiAgICAgICAgICAgIExpc1tMaXMubGVuZ3RoIC0gMV0ub2Zmc2V0VG9wICsKICAgICAgICAgICAgNDkgLQogICAgICAgICAgICB0aGlzLiRyZWZzLnNjcm9sbC4kZWwuY2xpZW50SGVpZ2h0OwogICAgICAgICAgdGhpcy4kcmVmcy5zY3JvbGwuc2Nyb2xsVG8oMCwgLWhlaWdodCwgMTAwKTsKICAgICAgICAgIHRoaXMuJHJlZnMuc2Nyb2xsLnJlZnJlc2goKTsKICAgICAgICB9CiAgICAgIH0sIDApOwogICAgICB0aGlzLndzLnNlbmQoCiAgICAgICAgSlNPTi5zdHJpbmdpZnkoewogICAgICAgICAgZXZlbnQ6ICJtZXNzYWdlIiwKICAgICAgICAgIG1lc3NhZ2U6IHRoaXMubWVzc2FnZSwKICAgICAgICAgIG5hbWU6IHRoaXMubmFtZSwKICAgICAgICAgIHVpZDogdGhpcy51aWQsCiAgICAgICAgICBkYXRlOiBuZXcgRGF0ZSgpCiAgICAgICAgfSkKICAgICAgKTsKICAgICAgdGhpcy5tZXNzYWdlID0gIiI7CiAgICB9LAogICAgY2hlY2tTZXJ2ZXI6IGZ1bmN0aW9uKCkgewogICAgICB2YXIgX3RoaXMgPSB0aGlzOwogICAgICBjbGVhclRpbWVvdXQodGhpcy5oYW5kbGUpOwogICAgICB0aGlzLmhhbmRsZSA9IHNldFRpbWVvdXQoZnVuY3Rpb24oKSB7CiAgICAgICAgX3RoaXMub25DbG9zZSgpOwogICAgICAgIHNldFRpbWVvdXQoZnVuY3Rpb24oKSB7CiAgICAgICAgICBfdGhpcy5pbml0KCk7CiAgICAgICAgfSwgMTAwMCk7CiAgICAgICAgLy8g6K6+572uMW1z55qE5pe25bu277yM6LCD6K+V5Zyo5pyN5Yqh5Zmo5rWL5pyq5Y+K5pe25ZON5bqU5pe277yM5a6i5oi356uv55qE5Y+N5bqUCiAgICAgIH0sIDMwMDAwICsgMTAwMCk7CiAgICB9CiAgfSwKICBtb3VudGVkKCkgewogICAgdGhpcy5uYW1lID0gd2luZG93LmxvY2FsU3RvcmFnZS5nZXRJdGVtKCJuYW1lIik7CiAgICB0aGlzLnVpZCA9IHdpbmRvdy5sb2NhbFN0b3JhZ2UuZ2V0SXRlbSgidXNlcklkIik7CiAgICB2YXIgb3RoaXMgPSB0aGlzOwogICAgb3RoaXMuZW50ZXIoKTsKICB9Cn07Cg=="},{"version":3,"sources":["DetailChat.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"DetailChat.vue","sourceRoot":"src/views/detail/childComps","sourcesContent":["<template>\n  <div id=\"chat\">\n    <NavBar class=\"nav-bar\">\n      <div slot=\"left\" class=\"back\" @click=\"backClick\">\n        <img src=\"@/assets/img/home/back.svg\" alt=\"\" />\n      </div>\n      <div slot=\"center\" class=\"title\">在线聊天({{ num }})</div>\n    </NavBar>\n    <Scroll\n      class=\"content\"\n      ref=\"scroll\"\n      :probe-type=\"3\"\n      :pull-up-load=\"true\"\n      @pullingUp=\"loadMore\"\n      @pullingDown=\"pullingDown\"\n    >\n      <ul>\n        <li v-for=\"(item, index) in lists\" :key=\"'message' + index\">\n          <div v-if=\"item.size == 0\" class=\"minienter\">\n            {{ item.name }}进入群聊\n          </div>\n          <div v-else-if=\"item.size == 3\" class=\"minienter\">\n            {{ item.name }}退出群聊\n          </div>\n          <div v-else-if=\"item.size == 1\" class=\"minemsg\">\n            <div><img :src=\"getAvatar(item.uid)\" alt=\"\" /></div>\n            <div class=\"mine-bottom\">\n              <div class=\"namefont\">\n                {{ item.name }} <span>{{ formdata(item.date) }} </span>\n              </div>\n              <div class=\"msg\">{{ item.message }}</div>\n            </div>\n          </div>\n          <div v-else class=\"othermsg\">\n            <div><img :src=\"getAvatar(item.uid)\" alt=\"\" /></div>\n            <div class=\"mine-bottom\">\n              <div class=\"namefont\">\n                {{ item.name }} <span>{{ formdata(item.date) }} </span>\n              </div>\n              <div class=\"msg\">{{ item.message }}</div>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </Scroll>\n    <div class=\"showcomment\">\n      <input type=\"text\" maxlength=\"20\" id=\"inputInfo\" v-model=\"message\" @blur=\"forbidMove()\" />\n      <span @click=\"send()\">发送</span>\n    </div>\n  </div>\n</template>\n\n<script>\nimport NavBar from \"@/components/common/navbar/NavBar\";\nimport Scroll from \"@/components/common/Scroll/Scroll.vue\";\n\nexport default {\n  name: \"DetailChat\",\n  components: {\n    NavBar,\n    Scroll\n  },\n  data() {\n    return {\n      content: \"\",\n      message: \"\",\n      lists: [],\n      ws: {},\n      name: \"\",\n      num: 0,\n      isshow: true,\n      isme: false,\n      roomid: 1,\n      uid: \"\",\n      handle: {},\n      token: \"\"\n    };\n  },\n  updated() {},\n  created() {\n    this.token = window.localStorage.getItem(\"token\");\n    if (!this.token) {\n      this.$router.push(\"/login\");\n    }\n  },\n  methods: {\n    forbidMove() {\n      document.querySelector(\"#inputInfo\").scrollIntoView(false);\n    },\n    formdata(date) {\n      return this.$moment(date).fromNow();\n    },\n    getAvatar(uid) {\n      return \"http://47.108.153.30:8001/users/\" + uid + \"/avatar\";\n    },\n    backClick() {\n      this.ws.close();\n      this.$router.back();\n    },\n    loadMore() {\n      this.$refs.scroll.refresh();\n    },\n    pullingDown() {\n      this.pullingdown = true;\n      setTimeout(() => {\n        this.pullingdown = false;\n        this.$refs.scroll.finishPullDown();\n      }, 300);\n    },\n    init() {\n      this.ws = new WebSocket(\"ws://47.108.153.30:8002/\");\n      this.ws.onopen = this.onOpen;\n      this.ws.onmessage = this.onMessage;\n      this.ws.onclose = this.onClose;\n      this.ws.onerror = this.onError;\n    },\n    enter() {\n      if (this.name.trim() === \"\") {\n        this.$router.push(\"/login\");\n      }\n      this.init();\n      this.isShow = false;\n    },\n    onOpen: function() {\n      // console.log('open:' + this.ws.readyState);\n      //ws.send('Hello fro,m client!')\n      // 发起鉴权请求\n      //this.ws.send(JSON.stringify({\n      //  event: 'auth',\n      //  message: //'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIx//MjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNT//E2MjM5MDIyfQ.//XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o'\n      //}))\n      this.ws.send(\n        JSON.stringify({\n          event: \"enter\",\n          message: this.name,\n          roomid: this.roomid,\n          uid: this.uid,\n          date: new Date()\n        })\n      );\n    },\n    onMessage: function(event) {\n      // 当用户未进入聊天室，则不接收消息\n      if (this.isShow) {\n        return;\n      }\n      // 接收服务端发送过来的消息\n      var obj = JSON.parse(event.data);\n      switch (obj.event) {\n        case \"enter\":\n          // 当有一个新的用户进入聊天室\n          obj.size = 0;\n          this.lists.push(obj);\n          break;\n        case \"out\":\n          obj.size = 3;\n          this.lists.push(obj);\n          break;\n        case \"heartbeat\":\n          // this.checkServer(); // timeInterval + t\n          // 可以注释掉以下心跳状态，主动测试服务端是否会断开客户端的连接\n          this.ws.send(\n            JSON.stringify({\n              event: \"heartbeat\",\n              message: \"pong\"\n            })\n          );\n          break;\n        default:\n          if (obj.name !== this.name) {\n            obj.size = 2;\n            // 接收正常的聊天\n            this.lists.push(obj);\n          }\n      }\n      this.num = obj.num;\n      this.$nextTick(() => {\n        let Lis = document.querySelectorAll(\"li\"); // 查找所有li元素\n        if (\n          Lis[Lis.length - 1].offsetTop + 49 >\n          this.$refs.scroll.$el.clientHeight\n        ) {\n          const height =\n            Lis[Lis.length - 1].offsetTop +\n            49 -\n            this.$refs.scroll.$el.clientHeight;\n          this.$refs.scroll.scrollTo(0, -height, 100);\n          this.$refs.scroll.refresh();\n        }\n      }, 0);\n    },\n    onClose() {\n      // 当链接主动断开的时候触发close事件\n      this.ws.close();\n    },\n    onError() {\n      // 当连接失败时，触发error事件\n      // 连接失败之后，1s进行断线重连！\n      var _this = this;\n      setTimeout(function() {\n        _this.init();\n      }, 1000);\n    },\n    // 发送消息\n    send() {\n      var minemsg = {\n        name: this.name,\n        message: this.message,\n        size: 1,\n        date: new Date(),\n        uid: this.uid\n      };\n      this.lists.push(minemsg);\n      this.$nextTick(() => {\n        let Lis = document.querySelectorAll(\"li\"); // 查找所有li元素\n        if (\n          Lis[Lis.length - 1].offsetTop + 49 >\n          this.$refs.scroll.$el.clientHeight\n        ) {\n          const height =\n            Lis[Lis.length - 1].offsetTop +\n            49 -\n            this.$refs.scroll.$el.clientHeight;\n          this.$refs.scroll.scrollTo(0, -height, 100);\n          this.$refs.scroll.refresh();\n        }\n      }, 0);\n      this.ws.send(\n        JSON.stringify({\n          event: \"message\",\n          message: this.message,\n          name: this.name,\n          uid: this.uid,\n          date: new Date()\n        })\n      );\n      this.message = \"\";\n    },\n    checkServer: function() {\n      var _this = this;\n      clearTimeout(this.handle);\n      this.handle = setTimeout(function() {\n        _this.onClose();\n        setTimeout(function() {\n          _this.init();\n        }, 1000);\n        // 设置1ms的时延，调试在服务器测未及时响应时，客户端的反应\n      }, 30000 + 1000);\n    }\n  },\n  mounted() {\n    this.name = window.localStorage.getItem(\"name\");\n    this.uid = window.localStorage.getItem(\"userId\");\n    var othis = this;\n    othis.enter();\n  }\n};\n</script>\n\n<style scoped>\n#chat {\n  position: relative;\n  height: 100vh;\n  background-color: #f5f5f5;\n}\n.nav-bar {\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  background-color: #df3832;\n  font-weight: 500px;\n  color: #fff;\n  box-shadow: 1px solid #333;\n}\n.back {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  left: 10px;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.content {\n  left: 0;\n  right: 0;\n  top: 44px;\n  bottom: 44px;\n  overflow: hidden;\n  position: absolute;\n}\n\n.showcomment {\n  position: fixed;\n  display: flex;\n  bottom: 0;\n  width: 100%;\n  height: 44px;\n  background-color: #f0f0f0;\n}\n\n/* .showcomment .warp {\n  background-color: #fff;\n  position: relative;\n  width: 70%;\n  top: 50%;\n  transform: translate(0, -50%);\n  border-radius: 50px;\n  left: 5%;\n  height: 30px;\n}\n\n.showcomment .warp {\n    color: #333;\n  font-weight: 400;\n} */\n\n.showcomment input {\n  width: 70%;\n  padding: 0 20px;\n  position: relative;\n  height: 25px;\n  border: none;\n  top: 50%;\n  left: 40%;\n  transform: translate(-50%, -50%);\n  border-radius: 30px;\n}\n\n.showcomment span {\n  display: inline-block;\n  margin: auto auto;\n  color: #333;\n}\n.minienter {\n  margin-top: 5px;\n  font-size: 10px;\n  text-align: center;\n  color: #555;\n  font-weight: 400;\n}\n.minemsg {\n  margin-top: 10px;\n  font-size: 18px;\n  color: #333;\n  font-weight: 400;\n  display: flex;\n  flex-direction: row-reverse;\n}\n.minemsg img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.minemsg .mine-bottom {\n  text-align: right;\n}\n\n.minemsg .mine-bottom .msg {\n  display: inline-block;\n  margin: 3px 3px;\n  padding: 5px 5px;\n  background-color: #fff;\n  border-radius: 10px;\n  font-size: 18px;\n}\n.minemsg .mine-bottom .namefont {\n  text-align: right;\n  font-size: 12px;\n  color: #999;\n  font-weight: 400;\n}\n.minemsg .mine-bottom .namefont span {\n  text-align: right;\n  font-size: 10px;\n  color: #999;\n  font-weight: 400;\n}\n\n.othermsg {\n  display: flex;\n  margin-top: 10px;\n  font-size: 18px;\n  color: #333;\n}\n.othermsg img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.othermsg .mine-bottom {\n  text-align: left;\n}\n\n.othermsg .mine-bottom .msg {\n  display: inline-block;\n  padding: 3px 3px;\n  background-color: #fff;\n  border-radius: 10px;\n  font-size: 18px;\n}\n.othermsg .mine-bottom .namefont {\n  font-size: 12px;\n  color: #999;\n  font-weight: 400;\n  font-size: 12px;\n}\n.othermsg .mine-bottom .namefont span {\n  font-size: 10px;\n  color: #999;\n  font-weight: 400;\n  font-size: 10px;\n}\n</style>\n"]}]}