{"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=style&index=0&id=1d84ce5a&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/childComps/DetailChat.vue","mtime":1619959031766},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/postcss-loader/src/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:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKI2NoYXQgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICBoZWlnaHQ6IDEwMHZoOwogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7Cn0KLm5hdi1iYXIgewogIHRvcDogMHB4OwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICB3aWR0aDogMTAwJTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGYzODMyOwogIGZvbnQtd2VpZ2h0OiA1MDBweDsKICBjb2xvcjogI2ZmZjsKICBib3gtc2hhZG93OiAxcHggc29saWQgIzMzMzsKfQouYmFjayB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHdpZHRoOiAzMHB4OwogIGhlaWdodDogMzBweDsKICBsZWZ0OiAxMHB4OwogIHRvcDogNTAlOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIC01MCUpOwp9Ci5jb250ZW50IHsKICBsZWZ0OiAwOwogIHJpZ2h0OiAwOwogIHRvcDogNDRweDsKICBib3R0b206IDQ0cHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBwb3NpdGlvbjogYWJzb2x1dGU7Cn0KCi5zaG93Y29tbWVudCB7CiAgcG9zaXRpb246IGZpeGVkOwogIGRpc3BsYXk6IGZsZXg7CiAgYm90dG9tOiAwOwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogNDRweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjBmMGYwOwoKfQoKLnNob3djb21tZW50IC53YXJwIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICB3aWR0aDogNzAlOwogIHRvcDogNTAlOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIC01MCUpOwogIGJvcmRlci1yYWRpdXM6IDUwcHg7CiAgbGVmdDogNSU7CiAgaGVpZ2h0OiAzMHB4Owp9Cgouc2hvd2NvbW1lbnQgLndhcnAgewogICAgY29sb3I6ICMzMzM7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQoKLnNob3djb21tZW50IC53YXJwIGlucHV0IHsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgaGVpZ2h0OiAyNXB4OwogIGJvcmRlcjogbm9uZTsKICB0b3A6IDUwJTsKICBsZWZ0OiA1MCU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgLTUwJSk7Cn0KCi5zaG93Y29tbWVudCBzcGFuIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgbWFyZ2luOiBhdXRvIGF1dG87CiAgY29sb3I6ICMzMzM7Cn0KLm1pbmllbnRlciB7CiAgbWFyZ2luLXRvcDo1cHg7CiAgZm9udC1zaXplOiAxMHB4OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBjb2xvcjogIzU1NTsKICBmb250LXdlaWdodDogNDAwOwp9Ci5taW5lbXNnewogIG1hcmdpbi10b3A6IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4OwogIGNvbG9yOiAjMzMzOwogIGZvbnQtd2VpZ2h0OiA0MDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogcm93LXJldmVyc2U7Cn0KLm1pbmVtc2cgaW1newogIHdpZHRoOiA0MHB4OwogIGhlaWdodDogNDBweDsKICBib3JkZXItcmFkaXVzOiA1MCU7Cn0KCi5taW5lbXNnIC5taW5lLWJvdHRvbXsKICB0ZXh0LWFsaWduOiByaWdodDsKfQoKLm1pbmVtc2cgLm1pbmUtYm90dG9tIC5tc2d7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogIG1hcmdpbjogM3B4IDNweDsKICBwYWRkaW5nOiA1cHggNXB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmY7CiAgYm9yZGVyLXJhZGl1czoxMHB4OwogIGZvbnQtc2l6ZTogMThweDsKfQoubWluZW1zZyAubWluZS1ib3R0b20gLm5hbWVmb250ewogIHRleHQtYWxpZ246IHJpZ2h0OwogIGZvbnQtc2l6ZTogMTJweDsKICBjb2xvcjogIzk5OTsKICBmb250LXdlaWdodDogNDAwOwp9Ci5taW5lbXNnIC5taW5lLWJvdHRvbSAubmFtZWZvbnQgc3BhbnsKICB0ZXh0LWFsaWduOiByaWdodDsKICBmb250LXNpemU6IDEwcHg7CiAgY29sb3I6ICM5OTk7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQoKCgoKCgoKLm90aGVybXNnewogIGRpc3BsYXk6IGZsZXg7CiAgbWFyZ2luLXRvcDogMTBweDsKICBmb250LXNpemU6IDE4cHg7CiAgICBjb2xvcjogIzMzMzsKfQoub3RoZXJtc2cgaW1newogIHdpZHRoOiA0MHB4OwogIGhlaWdodDogNDBweDsKICBib3JkZXItcmFkaXVzOiA1MCU7Cn0KCi5vdGhlcm1zZyAubWluZS1ib3R0b217CiAgdGV4dC1hbGlnbjogbGVmdDsKfQoKLm90aGVybXNnIC5taW5lLWJvdHRvbSAubXNnewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICBwYWRkaW5nOiAzcHggM3B4OwogICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIGJvcmRlci1yYWRpdXM6MTBweDsKICBmb250LXNpemU6IDE4cHg7Cn0KLm90aGVybXNnIC5taW5lLWJvdHRvbSAubmFtZWZvbnR7CiAgZm9udC1zaXplOiAxMnB4OwogIGNvbG9yOiAjOTk5OwogIGZvbnQtd2VpZ2h0OiA0MDA7CiAgZm9udC1zaXplOiAxMnB4Owp9Ci5vdGhlcm1zZyAubWluZS1ib3R0b20gLm5hbWVmb250IHNwYW57CiAgZm9udC1zaXplOiAxMHB4OwogICAgY29sb3I6ICM5OTk7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBmb250LXNpemU6IDEwcHg7Cn0K"},{"version":3,"sources":["DetailChat.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2NA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;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;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;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\">{{ item.name }}进入群聊</div>\n          <div v-else-if=\"item.size==3\" class=\"minienter\">{{ item.name }}退出群聊</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\">{{item.name}} <span>{{formdata(item.date)}} </span> </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\">{{item.name}} <span>{{formdata(item.date)}} </span> </div>\n              <div class=\"msg\">{{item.message}}</div>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </Scroll>\n    <div class=\"showcomment\">\n      <div class=\"warp\">\n        <input type=\"text\" v-model=\"message\" />\n      </div>\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    };\n  },\n  methods: {\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        alert(\"用户名不得为空\");\n        return;\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            console.log(obj);\n            // 接收正常的聊天\n            this.lists.push(obj);\n          }\n      }\n      this.$refs.scroll.refresh()\n      this.num = obj.num;\n    },\n    onClose: function() {\n      // 当链接主动断开的时候触发close事件\n      this.ws.close();\n    },\n    onError: function() {\n      // 当连接失败时，触发error事件\n      // 连接失败之后，1s进行断线重连！\n      var _this = this;\n      setTimeout(function() {\n        _this.init();\n      }, 1000);\n    },\n    // 发送消息\n    send: function() {\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.$refs.scroll.refresh()\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\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 .warp input {\n  position: absolute;\n  height: 25px;\n  border: none;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\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\n\n\n\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"]}]}