js sample

import lang from "../../localization/langs";

require('./style.scss');
import data_api from '../../api/data'
import pageHeader from '../../components/page-header/page-header'
import supportChat from '../../api/chat'
import user from '../../api/user'
import channels from '../../api/data'
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import {SOCKET_URL} from "../../api/const";
import {mapGetters} from "vuex";

export default {
  name: 'support-chat-page',

  data: function () {
    return {
      channel_exclusions: [
        'gamecash_'
      ],
      exclusion: 'gamecash_',
      addedChannel: ['gamecash_ch1'],
      messageText: '',
      textData: lang,
      language: this.$store.state.language,
      adminId: null,
      userName: null,
      //isThisUser: false,
      chatHead: {
        name: ''
      },
      channelName: 'gamecash_ch1',
      socket:'',
      pushstream: '',
      channelUpdates: '',
      //isThisUser: false,
      message: "",
      parsedData: [

      ],
      chatMessages: {messages:[], user: ""},
      streamMessages: {
        message: [

        ],
        channel: [

        ],
        users: [

        ]
      },
      settings: {
        scrollYMarginOffset: 0,
        maxScrollbarLength: 60,
        userId: null
      },
     messages:[

     ],
    }
  },
  components: {
   pageHeader,
   VuePerfectScrollbar
  },
  created() {
    console.clear();

  },
  computed: {
    ...mapGetters(['getProfile', 'isAuth']),
    getMessage: function () {
      let a = this.streamMessages.message;
      a = a.filter(item => {
        if (item.channel === this.channelName) {
          return true;
        }
        return false;
      });
      return a;
    }
  },

  mounted() {
    this.channelUpdates = new PushStream({
      host: SOCKET_URL,
      modes: "websocket",
      useSSL: true,
      messagesPublishedAfter: 15,
      messagesControlByArgument: true
    });
    this.channelUpdates.onmessage = this.updateChannels;
    this.channelUpdates.addChannel('gamecash_ch_events');
    this.channelUpdates.connect();
    this.pushstream = new PushStream({
      host: SOCKET_URL,
      modes: "websocket",
      useSSL: true,
      messagesPublishedAfter: 5,
      messagesControlByArgument: true
    });
    this.pushstream.onmessage = this.messageRecieved;
    this.pushstream.addChannel(this.channelName + '.b40');
    this.pushstream.connect();
    this.chatHead.name = this.channelName;
    this.getChannels();

  },

  methods: {
    log: function () {
      console.log(this.streamMessages.users);
    },
    getTime(UNIX_timestamp) {
      let a = new Date(UNIX_timestamp * 1000);
      let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
      let year = a.getFullYear();
      let month = months[a.getMonth()];
      let date = a.getDate();
      let hour = a.getHours();
      let min = a.getMinutes();
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour
      }
      if (min < 10) {
        min = "0" + min
      }
      let time = hour + ":" + min;

      return time;
    },

    getDate(UNIX_timestamp) {
      let a = new Date(UNIX_timestamp * 1000);
      //let months = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'];
      let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
      let year = a.getFullYear();
      let month = months[a.getMonth()];
      let date = a.getDate();
      let hour = a.getHours();
      let min = a.getMinutes();
      let sec = a.getSeconds();
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour
      }
      if (min < 10) {
        min = "0" + min
      }
      let time = {};
      time.date = date + "." + month + "." + year;
      time.number = Number(date);
      return time;
    },

    getMessage: function () {
      let a = this.streamMessages.message;
      // a.forEach(item => {
      //   let mess = item.text.message.replace("\n", "<br/>").substring(1, item.text.message.length-1);
      //   item.text.message = mess;
      // });
      a = a.filter(item => {
        if(item.channel === this.channelName) {
          return true;
        }
        return false;
      });
      return a;
    },

    messageRecieved: function (text, id, channel, eventid, isLastMessageFromBatch, time) {
      this.streamMessages.message.push({
        text: text,
        id: id,
        channel: channel,
        time: time,
        isThisUser: false
      });
      this.scrollTo();
      for (let key in this.streamMessages) {
        this.streamMessages[key].forEach(item => {
            if (item.text) {
              if (item.text.username === this.getProfile.username || item.text.username === 'anonymous') {
                item.isThisUser = true;
              }
            }
        });
      }

    },

    newline() {
      this.value = `${this.value}\n`;
    },

    getChannels: function () {
      channels.getChatChannels()
        .then(response => {
            this.parsedData = response.body.infos;
            this.parsedData.forEach(item => {
              this.streamMessages.channel.push({
                name: item.channel,
                isOpen: false,
                isService: false
              });
              for (let key in this.streamMessages.channel) {
                this.channel_exclusions.forEach(item => {
                  if (this.streamMessages.channel[key].name.indexOf(item) === 0) {
                    this.streamMessages.channel[key].isService = true;
                  }
                })
              }
            });
            this.streamMessages.channel.forEach(item => {
              if (item.isService === false) {
                this.streamMessages.users.push({
                  name: item.name,
                  isOpen: item.isOpen,
                })
              }
            });
          },
          reject => {
          });
    },

    updateChannels: function (response) {
      if (response.type === "channel_created" && response.channel.indexOf(this.exclusion) < 0) {
        this.streamMessages.users.push({
          name: response.channel,
          isOpen: false
        });
      }
    },

    sendMessage: function () {
      this.pushstream.sendMessage(this.messageText, this.userName);
    },

    sendMessage1: function (chan) {
      if (this.messageText != '' || this.messageText != ' '){
        let jmess = JSON.stringify(this.messageText);
        this.messageText = '';
        channels.pushMessageToPub(chan, jmess)
          .then(
            response => {
            },
            reject => {

            }
          )
      }

    },

    switchChannel: function (channel) {

      let check = () => {
        let a = 0;
        this.addedChannel.forEach(item => {
          if(item === channel) {
            a++;
          }
        })
        if(a === 0) {
          return true;
        } else {
          return false;
        }
      }

      if(check()) {
        this.addedChannel.push(channel);

        this.pushstream.addChannel(channel + '.b40');
      }

      this.channelName = channel;
      this.chatHead.name = channel;


    },

    getChatName: function () {
      this.userName = this.getProfile.username;
      this.chatHead.name = this.userName;
    },

    scrollTo(){
      let a = document.getElementById("scroll");

      setTimeout(function () {
        a.scrollTo(0, a.scrollHeight + 200);
      }, 100)

    },

    getUserInfo(){
      user.getUserInfo()
        .then(
          response => {
            this.adminId = response.body.id;
          },
          reject => {
          }
        )
    },

    socketConnect(){
      if(!this.socket){
        let sockAdr = {SOCKET_CHAT_URL};
        let a = sockAdr.SOCKET_CHAT_URL + "ws/admin_only?subscribe-broadcast&publish-broadcast&echo";
        this.socket = new WebSocket(a);

        this.socket.onopen = function(){
        };}


      let self = this;
      this.socket.onmessage = function(event) {
        let self1 = self;
        let incomingMessage2 = event.data;
        let message = "";
         if(incomingMessage2 !== "--heartbeat--"){
           message = JSON.parse(incomingMessage2);
           self.pushSocketMessage(message)
           // self.pushMessage(message);
         }


      };
      this.socket.onclose = function(event) {
        if (event.wasClean) {
        } else {
        }
      };
      this.socket.onerror = function(error) {
      };
    },

    putSupportMessage(){

      this.chatMessages.messages.push({
        message: this.message,
        new_for_admin: false,
        time: this.ParseData(Date.now()),
        user_id: this.adminId,
        username: "Support",
        message_by_admin: true,

      });

      supportChat.putSupportMessage(this.userId.toString(), this.message)
        .then(
          response => {
            this.message = '';
            return false;
          },
          reject => {
            //this.message = "";
          }
        );
      this.scrollTo()
    },

    pushSocketMessage(message){

      if(message.data_msg){
        message.data_msg.time = this.ParseData(message.data_msg.time);
        for(let item in this.messages){
          if(message.data_msg.user_id === this.messages[item][0].user_id){
            this.messages[item].push(message.data_msg)
          }
        }
      }
      this.scrollTo();
    },

    getAllMessagesForAdmin(){

      supportChat.getAllSupportMessages()
        .then(
          response => {
            let msg = response.body;
            for(let item in msg){
              msg[item][msg[item].length - 1].time = this.ParseData(msg[item][msg[item].length - 1].time);

            }
            this.messages = response.body;
          },
          reject => {
          }
        )
    },

    readMessages(id){
      supportChat.adminReadMessages(id)
        .then(
          response=>{
          },
          reject=>{
          }
        )
    },

    ParseData(date1) {

  let date = new Date();

  let hours = date.getHours(date1);
  if(hours.toString().length === 1){
    hours = "0"+hours
  }

  let minutes = date.getMinutes(date1);
    if(minutes.toString().length === 1){
      minutes = "0"+minutes
    }

  let seconds = date.getSeconds(date1);
    if(seconds.toString().length === 1){
      seconds = "0"+seconds
    }

  let day = date.getDate(date1);
    if(day.toString().length === 1){
      day = "0"+day
    }

  let month = date.getMonth(date1);
    if(month.toString().length === 1){
      month = "0"+month
    }

  let year = date.getFullYear(date1);
    if(year.toString().length === 1){
      year = "0"+year
    }

  let realDate = day + "." + month + "." + year + " " + hours + ":" + minutes + ":" + seconds;

  return realDate
},


    openMessages(item){

let subitem = item;

      this.userId = subitem[0].user_id;
      if(!subitem.dateChanged){
        for(let item3 in subitem){
          subitem.dateChanged = true;
          subitem[item3].time = this.ParseData(subitem[item3].time)
        }
      }

      if(subitem[subitem.length-1].new_for_admin === true){

          subitem[subitem.length-1].new_for_admin = false;

        this.readMessages(this.userId);
      }

  this.chatMessages = {};
  this.chatMessages.messages = subitem;
  this.chatMessages.user = subitem[0].username;
  subitem.newMess = false;
  this.scrollTo()
    }
  }
};