Onlinewebsocket.vue

<template>
  <div class="container">
    <div class="selectName" id="selectNameId">
      <div class="selectInput">
        <h1>欢迎进入聊天室</h1>
        <div style="display: flex; height: 20%">
          <el-input placeholder="请输入昵称进入聊天室" v-model="user" clearable>
          </el-input>
          <!-- &nbsp; -->
          <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
        </div>
        <div class="btn_fx">
          <a @click="registerUsername()">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <p>进入聊天室</p>
          </a>
        </div>
      </div>
    </div>
    <div class="left">
      <el-card class="left_top">
        <p>聊天室</p>
        <!-- <p>人数:{{personCount}}</p> -->
        <p>消息:{{ chatCount }}</p>
        <div
          v-for="(item, index) in room_name"
          :key="index"
          class="roomNameClass"
        >
          <div
            v-bind:class="[
              { room_active: index == room_loc },
              room_defaultClass,
            ]"
            @click="changeRoom(item, index)"
          >
            {{ item }}
          </div>
        </div>
        <p>{{ msg }}</p>
      </el-card>

      <el-card class="input_chat1" shadow="always" cellpadding="1px">
        <div class="right_header" style="display: flex; width: 100%">
          <h1 class="roomName">{{ room_select }}</h1>
          <h1
            class="clearFont"
            style="width: 100%; right: 0; text-align: right; cursor: pointer"
            @click="clearChat()"
          >
            清屏
          </h1>
        </div>

        <el-input type="textarea" v-model="send_info"> </el-input>
        <el-button
          type="success"
          round
          style="margin-top: 2%"
          @click="websocketOpen(send_info)"
          >发送</el-button
        >
      </el-card>
    </div>
    <!-- 聊天信息 -->
    <div class="right" id="idChat" style="opacity: 0.8">
      <el-card shadow="hover" style="line-height: 10px">
        <div class="blockChat">
          <div
            v-for="(item, index) in chat_info"
            :key="index"
            class="text item"
          >
            <!-- {{item}} -->
            <template v-if="item.room == room_select">
              <div
                v-for="(item2, index2) in item.content"
                :key="index2"
                class="msgClass"
                v-bind:class="[
                  { info_active: ws_flag == true },
                  info_defaultClass,
                ]"
              >
                <div class="msgUser">
                  <i class="el-icon-user"
                    >{{ item2.user }} &nbsp;{{ item2.create_time }}</i
                  >
                </div>
                <div class="msgMessage">
                  <p>{{ item2.message }}</p>
                </div>
              </div>
            </template>
          </div>
        </div>

        <el-card class="input_chat2" shadow="always" cellpadding="1px">
          <div class="right_header" style="display: flex; width: 100%">
            <h1 class="roomName">{{ room_select }}</h1>
            <h1
              class="clearFont"
              style="width: 100%; right: 0; text-align: right; cursor: pointer"
              @click="clearChat()"
            >
              清屏
            </h1>
          </div>

          <el-input type="textarea" v-model="send_info"> </el-input>
          <el-button
            type="success"
            round
            style="margin-top: 2%"
            @click="websocketOpen(send_info)"
            >发送</el-button
          >
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";
import axios from "axios";

export default {
  components: {
    VueMarkdown,
  },
  name: "Onlinewebsocket",
  data() {
    return {
      ws_flag: false,
      msg: "连接中",
      send_info: "hello world!",
      room_name: ["DjangoVue"],
      room_select: "",
      // baseUrl: "http://localhost:8006/webchat/index/",
      baseUrl: "http://yongma16.xyz/api/",
      // websocketUrl: "/ws_api/",
      websocketUrl: "ws://yongma16.xyz/ws-api/",
      websocket: null,
      // room 存房间名字，content保存聊天信息的数组
      chat_info: new Array(),
      chat_room: null,
      room_loc: 0,
      user: "",
      cookieValue: document.cookie,
      chatCount: 0,
      personCount: 0,
      sendmsg: "",
      getmsg: "",
      // 房间索引0
      chatRoomIndex: 0,
      // msg='连接成功'
    };
  },
  watch() {
    // cookieValue:function(newValue,oldValue){
    //   this.user=newValue
    //   console.log(newValue,oldValue)
    //   return newValue
    // }
  },
  beforeDestroy() {
    // window.removeEventListener("onload",this.initWebsocket());
  },
  mounted() {
    // 判断是否登录
    this.judeIsLogin();
    // window.addEventListener("onload",this.initWebsocket());
  },
  methods: {
    judeIsLogin() {
      try {
        console.log(
          "domMain",
          document.getElementById("mainappid"),
          document.getElementById("mainappid").style
        );
        document.getElementById("mainappid").style.padding = "0";
        document.getElementById("mainappid").style.margin = "0";
      } catch (e) {
        console.log("e", e);
      }
      // let that = this;
      // console.log("cookie");
      // let strcookie = document.cookie; //获取cookie字符串
      // let arrcookie = strcookie.split(";"); //分割
      // let length = arrcookie.length;
      // //遍历匹配
      // for (let i = 0; i < length; i++) {
      //   let arr = arrcookie[i].split("=");
      //   let arrname = arr[0].replace(" ", "");
      //   // 划分为两个
      //   if (arrname == "user") {
      //     that.user = arr[1];
      //     let selectNameDom = document.getElementById("selectNameId");
      //     console.log(selectNameDom);
      //     selectNameDom.style.display = "none";
      //   }
      //   console.log(arrname == "user", arrname + "：" + arr[1]);
      // }
    },
    registerUsername() {
      let selectNameDom = document.getElementById("selectNameId");
      console.log(selectNameDom);
      selectNameDom.style.display = "none";
      //
      this.initWebsocket();
      this.getRoom(this.room_loc);
      this.initRoom();
      // this.cookiePrint(); //打印cookie
    },
    clearChat() {
      // 清空消息
      this.chatCount = 0;
      this.chat_info = new Array();
      // console.log('this.websocket.chat_info',this.websocket.chat_info)
      // console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
      this.websocket.chat_info[this.chatRoomIndex].content = [];
      // console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
      // this.websocket.chat_info=null;
      // this.websocket.chat_info=new Array()
    },
    cookiePrint() {
      let that = this;
      console.log("cookie");
      let strcookie = document.cookie; //获取cookie字符串
      let arrcookie = strcookie.split(";"); //分割
      let length = arrcookie.length;
      //遍历匹配
      for (let i = 0; i < length; i++) {
        let arr = arrcookie[i].split("=");
        let arrname = arr[0].replace(" ", "");
        // 划分为两个
        if (arrname == "user") {
          that.user = arr[1];
        }
        console.log(arrname == "user", arrname + "：" + arr[1]);
      }
    },
    info_defaultClass: function () {
      console.log("发送消息的css");
    },
    room_defaultClass: function () {
      console.log("选中房间的css");
    },
    getRoom: function (room_loc) {
      // 更新index
      this.room_loc = room_loc;
      console.log("获取房间");
      axios
        .get(this.baseUrl + "webchat/index/")
        .then((res) => {
          console.log("返回", res);
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    initRoom: function () {
      // 用户信息
      // 日期格式化
      Date.prototype.Format = function (fmt) {
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "H+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          S: this.getMilliseconds(), //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            );
        return fmt;
      };

      this.room_select = this.room_name[0];
    },
    changeRoom: function (roomName, roomLoc) {
      this.room_loc = roomLoc;
      this.room_select = roomName;
      // 新建连接
      // this.initWebsocket(roomName)
      console.log("选择房间", roomName);
      // console.log(that)
    },
    initWebsocket: function (roomName) {
      try {
        if (this.websocket) {
          this.websocket.close();
        }
      } catch (e) {
        console.log("关闭失败！", e);
      }
      // 触发+1
      this.personCount++;

      // 默认第一个房间
      let room = roomName != undefined ? roomName : this.room_name[0];
      // 判断房间是否存在，不存在则创建房间
      let chatRoomIndex = 0;
      try {
        //判断房间是否存在
        let roomFlag = false;
        this.chat_info.map((item, index) => {
          if (item.room == roomName) {
            // 房间存在
            console.log("房间存在", roomName);
            roomFlag = true;
            chatRoomIndex = index;
          }
        });
        if (!roomFlag) {
          // 房间不存在，创建

          let roomObject = {
            room: room,
            content: [],
          };
          this.chat_info.push(roomObject);
          console.log("创建房间", this.chat_info);
        }
      } catch (e) {
        console.log("创建房间出错", e);
      }
      this.chatRoomIndex = chatRoomIndex;
      const wsUrl = this.websocketUrl;
      this.websocket = new WebSocket(wsUrl + room + "/"); // 连接
      console.log(this.websocket, "聊天室");
      this.websocket.onmessage = this.websocketMessage; // 函数指向
      this.websocket.onopen = this.websocketOpen;
      this.websocket.onerror = this.websocketError;
      this.websocket.onclose = this.websocketClose;
      // 保存数据 临时容器  房间号
      this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info));
      this.websocket.chatRoomIndex = chatRoomIndex;
      console.log("实例websocket", this.websocket);
    },
    websocketMessage: function (e) {
      console.log("聊天信息", JSON.parse(JSON.stringify(e.data)));
      let res = JSON.parse(e.data);
      if (res.message.info.isTrusted) {
        console.log("accsee right!");

        // 人数记录,只会后加入的
      }
      if (true) {
        //  房间计数
        this.personCount = res.message.person_count
          ? res.message.person_count
          : 0;
        let getUser = res.message.user;
        let getinfo = res.message.info.isTrusted
          ? `欢迎${getUser}加入聊天室`
          : res.message.info;
        this.getmsg = getinfo;
        this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
        let getTime = res.message.create_time;
        let message = {
          user: getUser,
          message: getinfo,
          create_time: getTime,
        };
        // 添加信息

        this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
          message
        );
        // 交换数据
        this.chat_info = this.websocket.chat_info;
        this.chatCount++;
        console.log("信息", this.chat_info);
        setTimeout((o) => {
          try {
            let dom = document.getElementById("idChat");
            console.log("滚动前", dom.scrollTop, dom.scrollHeight);
            dom.scrollTop = parseInt(dom.scrollHeight);
            console.log("滚动后", dom.scrollTop, dom.scrollHeight);
            dom.scrollTop = dom.scrollHeight;
            // document.getElementById('idChat').scrollTop+=20
          } catch (e) {
            console.log(e);
          }
        }, 100);
      }
    },
    websocketOpen: function (info) {
      this.websocketSend(info);
      // this.send_info=''//清空
    },
    websocketSend: function (data) {
      this.sendmsg = data;
      // 名字，消息，时间
      let sendData = {
        person_count: this.personCount,
        user: this.user,
        info: data,
        create_time: new Date().Format("yyyy-MM-dd HH:mm:ss"),
      };
      // this.msg='消息发送中'
      console.log("消息发送中");
      let info = JSON.stringify({
        message: sendData,
      });
      try {
        this.websocket.send(info);
        // this.msg=''
      } catch (e) {
        console.log("消息发送失败", e);
        this.msg = "连接失败";
      }
    },
    websocketError: function () {
      this.msg = "连接失败";
      let selectNameDom = document.getElementById("selectNameId");
      console.log(selectNameDom);
      selectNameDom.style.display = "block";
      window.alert("websocket连接失败！");
      // this.initWebsocket()// 重连
    },
    websocketClose: function (e) {
      // 人数减一
      this.personCount = this.personCount > 0 ? this.personCount-- : 0;
      this.msg = "离开";
      console.log("离开", e);
      let selectNameDom = document.getElementById("selectNameId");
      console.log(selectNameDom);
      selectNameDom.style.display = "block";
      // 触发减一
    },
  },
  destroyed() {
    this.websocketClose(); // 关闭
  },
};
</script>

<style scoped>
.selectName {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  /* display: fixed; */
  top: 50%;
  left: 50%;
  z-index: 3;
  /* border-radius: 10px; */
  transform: translate(-50%, -50%);
  background: #005aa7;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fffde4, #005aa7);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fffde4, #005aa7);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: 400%;
  animation: sendInfo 20s linear infinite;
  opacity: 0.9;
}

.selectInput {
  position: relative;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.selectInput h1 {
  font-size: 3em;
  color: #fb7248;
}

.btn_fx {
  position: relative;
  padding: 20px;
  /* margin:20px; */
}

.blockChat {
  position: relative;
  width: 100%;
  display: block;
}

.blockChat h1 {
  color: rgb(135, 187, 222);
  font-size: 20px;
  font-weight: bold;
}

.msgClass {
  position: relative;
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 30px;
  /* background: rgba(135, 187, 222,.6); */
  background: #4ca1af;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #c4e0e5, #4ca1af);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #c4e0e5, #4ca1af);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  background-size: 400%;
  animation: sendInfo 20s linear infinite;
  /* -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

.msgUser {
  position: relative;
  margin: 5px;
  padding: 5px;
  top: 50%;
  width: 100%;
  height: 30px;
  color: rgb(0, 0, 0);
  /* background: rgb(135, 187, 222); */
}

.msgMessage {
  position: relative;

  width: 100%;
  height: 50px;
  font-size: 20px;
  color: rgb(0, 0, 0);
  /* background: rgb(135, 187, 222); */
}

.msgMessage p {
  position: relative;
  /* left:50%; */
  margin: 5px;
  padding: 5px;
  top: 50%;
}

.left_top {
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.left_top p {
  font-size: 20px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.roomNameClass {
  position: relative;
  cursor: pointer;
}

.room_active {
  appearance: none;
  position: relative;
  text-align: left;
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: rgb(135, 187, 222);
  text-shadow: 0 5px 20px #fff;
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  /* padding-top:10px; */
  /* transition: 0.5s; */
}

.room_defaultClass {
  appearance: none;
  position: relative;
  text-align: left;
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: rgb(0, 140, 255);
  background: transparent;
  cursor: pointer;
  line-height: 20px;
  /* padding-top:10px; */
  /* transition: 0.5s; */
}

.info_active {
  position: relative;
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 30px;
  background: #5d4157;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #a8caba, #5d4157);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8caba, #5d4157);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-size: 400%;
  animation: sendInfo 2s linear infinite;
}

.info_defaultClass {
  position: relative;
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 30px;
  background: rgba(135, 187, 222, 0.6);
  background-image: linear-gradient(to right, #9b63ff, #462188);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes sendInfo {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
  opacity: 1;
  /* overflow: hidden; */
  /* background-color: aliceblue; */
  align-content: inherit;
  display: flex;
  margin: 0;
  padding: 0;
  background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
  /* background-size: cover; */
  background-repeat: repeat-y;
}

/* 取消滚动并且隐藏 */
.container::-webkit-scrollbar,
.left::-webkit-scrollbar .right::-webkit-scrollbar {
  display: none;
}

.left {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: auto;
  margin: 5px;
  padding: 5px;
}

.right {
  position: relative;
  width: 70%;
  height: 100%;
  overflow: auto;
  margin: 5px;
  padding: 5px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}

.input_chat1 {
  /* position: myblog_static; */
  margin-top: 5%;
  text-align: letf;
  line-height: 50px;
  /* background: cadetblue; */
}

.input_chat2 {
  /* position: myblog_static; */
  margin-top: 5%;
  text-align: letf;
  line-height: 50px;
  background: cadetblue;
  display: none;
}

.selectName a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 80px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.selectName a p {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 80px;
  appearance: none;
  font-size: 2em;
  text-transform: uppercase;
  color: #fb7248;
  border: 1px solid #fb7248;
  box-sizing: border-box;
  z-index: 1;
  transition: 0.5s;
  margin: 0;
  padding: 0;
}

.selectName a:hover p {
  color: #fff;
}

.selectName a span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fb7248;
  opacity: 0.5;
  z-index: -1;
  transition: 0.5s;
}

.selectName a span:nth-child(1) {
  top: -100%;
  left: -100%;
}

.selectName a span:nth-child(2) {
  bottom: -100%;
  left: -100%;
}

.selectName a span:nth-child(3) {
  top: -100%;
  right: -100%;
}

.selectName a span:nth-child(4) {
  bottom: -100%;
  right: -100%;
}

.selectName a:hover span:nth-child(1) {
  top: 0px;
  left: 0px;
}

.selectName a:hover span:nth-child(2) {
  bottom: 0px;
  left: 0px;
}

.selectName a:hover span:nth-child(3) {
  top: 0px;
  right: 0px;
}

.selectName a:hover span:nth-child(4) {
  bottom: 0px;
  right: 0px;
}

@media screen and (max-width: 450px) {
  .selectName a {
    width: 100px;
    height: 50px;
  }

  .selectName a p {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 1em;
  }

  .selectInput h1 {
    font-size: 2em;
    color: #fb7248;
  }

  .container {
    background-color: lightblue;
    display: inline-block;
    box-sizing: border-box;
    background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
    background-repeat: repeat-y;
    /* overflow: hidden; */
  }

  .left {
    /* top:60%; */
    position: relative;
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 5px;
    padding: 5px;
  }

  .right {
    /* top:5%; */
    position: relative;
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 5px;
    padding: 5px;
  }

  .input_chat1 {
    display: none;
  }

  .input_chat2 {
    /* position: myblog_static; */
    margin-top: 5%;
    width: 100%;
    text-align: letf;
    line-height: 50px;
    background: cadetblue;
    display: inline-block;
  }
}
</style>