Code:
<template>
<div class="bottomfill">
<div class="d-flex justify-content-start flex-wrap room nomargin togglearea">
<div class="checkbox leftmargin">
<label>
<input class="ckbox" type="checkbox" v-model="reverseorder">
<span v-bind:class="{reverseon: this.reverseorder}" class="toggler">Toggle Message Order</span>
<span v-if="this.reverseorder">
<i v-bind:class="{reverseon: this.reverseorder}" class="tim-icons icon-minimal-down"></i>
</span>
<span v-else>
<i class="tim-icons icon-minimal-up"></i>
</span>
</label>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap room">
<div class="col-md-12 box">
<div
class="neo-chat-title"
v-if="this.psoccupancy"
>Live Chat Participants: {{ this.psoccupancy}}</div>
<div class="neo-chat-title">{{ this.userlist}}</div>
<VueSteamChat :messages="this.msglist" @vue-steam-chat-on-message="onNewMessage"/>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap room channelbar">
<div>Channels</div>
<div class="checkbox">
<label>
<input class="ckbox" type="checkbox" v-model="livebox">
<span v-bind:class="{liveon: this.livebox}">Live</span>
</label>
</div>
<div class="checkbox">
<label>
<input class="ckbox" type="checkbox" v-model="postsbox">
<span v-bind:class="{liveon: this.postsbox}">Posts</span>
</label>
</div>
<div class="checkbox disabled">
<label>
<input class="ckbox" type="checkbox" v-model="statusbox">
<span v-bind:class="{liveon: this.statusbox}">Status</span>
</label>
</div>
</div>
</div>
</template>
<script>
function init() {
sessionStorage.setItem("loaded", true);
}
window.onload = init;
// import Vuex from "vuex";
// Vue.use(Vuex);
import Vue from "vue";
import VueSteamChat from "vue-steam-chat";
import { setTimeout, setInterval, clearInterval } from "timers";
var PubNub = require("pubnub");
require("vue-steam-chat/dist/index.css");
var interval = null;
var vbchat = "";
if (window.vbname == "Unregistered") {
const d = Math.floor(Math.random() * 100);
if (localStorage.getItem("randomuser")) {
vbchat = "Guest " + localStorage.getItem("randomuser");
} else {
const d = Math.floor(Math.random() * 100);
localStorage.setItem("randomuser", d);
vbchat = "Guest " + localStorage.getItem("randomuser");
}
} else {
vbchat = window.vbname;
}
var pubnub = new PubNub({
subscribeKey: "demo",
publishKey: "demo",
ssl: true,
keepAlive: true,
// heartbeatInterval: 10,
presenceTimeout: 300,
restore: true,
uuid: vbchat
});
var debounce = require("debounce");
export default {
name: "vue-steam-chat",
components: {
VueSteamChat
},
computed: {
msglist() {
var listarray = [];
//console.log("this.text ", this.text);
var that = this;
this.text.forEach(function(element) {
if (
element.text.match(/Forum Replied To/g) ||
element.text.match(/Forum Started Post/g)
) {
if (that.postsbox == true) {
listarray.push(element);
}
} else if (element.text.match(/Forum Status/g)) {
if (that.statusbox == true) {
listarray.push(element);
}
} else if (that.livebox == true) {
listarray.push(element);
}
});
if (this.reverseorder == true) {
return listarray.reverse();
} else {
return listarray;
}
//this.adjustScroll();
},
uuid() {
return pubnub.getUUID();
}
},
data() {
return {
blockpublish: false,
livebox: true,
reverseorder: true,
postsbox: true,
statusbox: true,
historydone: false,
userlist: "",
userarray: [],
uuida: window.vbuserId,
uuname: window.vbusername,
ch1: null,
time: Date.now() / 1000,
chathist: [],
laststatuschange: [{}],
occupancy: 0,
psoccupancy: 0,
initdone: 0,
status: 0,
text: [
{
time: 1506117496,
username: "Gaben",
text: "Chat initialized ..."
},
{
time: 1506117500,
username: "Solo",
text: "So, say something !!"
},
{
time: 1506117530,
username: "Neo",
text: "Hmmm ..."
}
]
};
},
methods: {
adjustScroll() {
var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
var view = document.querySelector(".bottomfill");
var toggle = document.querySelector(".togglearea");
var channels = document.querySelector(".channelbar");
if (!this.reverseorder) {
scroll.scrollTop = 0;
//$("html,body").animate({ scrollTop: 0 }, "slow");
// view.scrollIntoView(true);
view.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
} else {
scroll.scrollTop = scroll.scrollHeight;
// channels.scrollIntoView(false);
channels.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
});
//$("html,body").animate({ scrollTop: scroll.scrollHeight }, "slow");
}
},
initScroll() {
var view = document.querySelector(".bottomfill");
var channels = document.querySelector(".channelbar");
var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
//$("html,body").animate({ scrollTop: scroll.scrollHeight }, "slow");
//channels.animate({ scrollIntoView: false }, "slow");
view.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
});
},
getHereNow() {
var that = this;
pubnub.hereNow(
{
channels: ["ch1"],
// channelGroups : ["cg1"],
includeUUIDs: true,
includeState: true
},
function(status, response) {
that.psoccupancy = response.totalOccupancy;
// console.log("herenow: ", response);
var allusers = "";
var index = 0;
response.channels.ch1.occupants.forEach(function(user) {
if (response.channels.ch1.occupants) {
that.userarray.push(user);
if (index == 0) allusers = user.uuid;
else allusers = allusers + ", " + user.uuid;
}
index++;
that.userlist = allusers;
});
}
);
},
gmCallback(status, response) {
console.log("gm callback", status, response);
},
history() {
var that = this;
if (pubnub) {
pubnub.history(
{
reverse: false,
channel: "ch1",
count: 100, // how many items to fetch
stringifiedTimeToken: true // false is the default
},
function(status, response) {
if (status.error == false) {
response.messages.forEach(function(element) {
if (element.entry.username && element.entry.text != undefined) {
if (
element.entry.text.match(/Forum Replied To/g) ||
element.entry.text.match(/Forum Started Post/g)
) {
if (that.postsbox == true) {
that.text.push(element.entry);
}
} else if (element.entry.text.match(/Forum Status/g)) {
if (that.statusbox == true) {
that.text.push(element.entry);
}
} else if (that.livebox == true) {
that.text.push(element.entry);
}
}
});
that.historydone = true;
} else {
console.log("error ", status);
}
}
);
}
that.initScroll();
},
controlMessage(message) {
var that = this;
if (message.length < 2) {
return false;
}
let m = {
time: Date.now() / 1000,
username: this.uuid,
text: message
};
var publishConfig = {
sendByPost: true,
channel: "controlreply",
message: m
};
pubnub.publish(publishConfig, function(status, response) {
if (status.error) {
console.log(status);
} else {
// console.log("control message Published w/ timetoken", JSON.stringify(publishConfig));
}
});
},
onNewMessage(message) {
var that = this;
if (message.length < 2) {
return false;
}
let m = {
time: Date.now() / 1000,
username: this.uuid,
text: message
};
var publishConfig = {
sendByPost: true,
channel: "ch1",
message: m
};
if (that.blockpublish != true) {
pubnub.publish(publishConfig, function(status, response) {
if (status.error) {
console.log(status);
} else {
// console.log("message Published w/ timetoken", response.timetoken);
}
});
that.getHereNow();
// that.adjustScroll();
}
}
},
created() {
$.LoadingOverlay("show");
pubnub.subscribe({
channels: ["ch1", "control"],
withPresence: false
});
},
updated() {
debounce(this.getHereNow, 300, true);
this.adjustScroll();
},
beforeDestroy() {
//pubnub.unsubscribeAll();
pubnub.unsubscribe({
channels: ["ch1", "control"]
});
var existingListener = {
message: function() {}
};
if (existingListener) pubnub.removeListener(existingListener);
if (interval) {
clearInterval(interval);
}
},
async mounted() {
if (localStorage.blc) {
if (localStorage.getItem("blc") == "true") {
this.blockpublish = true;
}
}
if (localStorage.status_msgs) {
if (localStorage.getItem("status_msgs") == "yes") {
this.statusbox = true;
}
}
var that = this;
that.history();
pubnub.addListener({
// status: function(statusEvent) {
// if (statusEvent.category === "PNConnectedCategory") {
// var newState = {
// name: this.uuid,
// timestamp: Date.now()
// };
// pubsub.setState({
// channels: ["ch1"],
// state: newState
// });
// }
// },
message: function(m) {
// console.log("livechat msg channel received: ", JSON.stringify(m));
that.adjustScroll();
if (m.channel == "ch1") {
if (
m.message.text.match(/Forum Replied To/g) ||
m.message.text.match(/Forum Started Post/g)
) {
if (that.postsbox == true) {
that.text.push(m.message);
}
} else if (m.message.text.match(/Forum Status/g)) {
if (that.statusbox == true) {
that.text.push(element.entry);
}
} else if (that.livebox == true) {
that.text.push(m.message);
}
} else if (m.channel == "control") {
if (m.message.text.match(/ping/gi)) {
that.controlMessage(
"IAMHERE V" +
that.$store.state.version.toFixed(4) +
" Blocked: " +
that.blockpublish
);
}
// console.log("live chat control", m.channel, m.message);
///
/// deleted internal stuff
///
}
that.getHereNow();
//that.text.push(m.message);
//console.log("newmsg: ", m.message);
},
presence: function(presenceEvent) {
that.psoccupancy = presenceEvent.occupancy;
//const i = Date.now();
console.log("listen presence", presenceEvent);
that.getHereNow();
}
});
this.getHereNow();
var mythis = this;
$(function() {
var input = document.querySelector(".vue-steam-chat__textarea");
var button = document.querySelector(".vue-steam-chat__button");
var scroll = document.querySelector(".vue-steam-chat__wrapper--scroll");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
button.click();
}
});
$.LoadingOverlay("hide");
});
}
};
</script>
<style scoped>
.box {
margin: 0px !important;
height: 500px;
margin: 20px;
}
.neo-chat-title {
color: slategray;
font-size: 1.2em;
text-align: center;
margin: 10px;
}
.room {
margin-bottom: 20px;
}
.ckbox {
margin-right: 7px;
background-color: cornflowerblue;
}
.reverseon {
color: cornflowerblue;
}
.liveon {
color: cornflowerblue;
}
.ckbox {
color: cornflowerblue;
}
.nomargin {
margin: 0px 0px 0px 0px;
}
.leftmargin {
margin-left: 30px;
}
.toggler {
margin: 10px 10px 0px 0px;
}
.channelbar {
margin: 100px 10px 10px 10px;
padding-bottom: 10px;
}
.bottomfill {
margin-bottom: 0px;
padding-top: 20px;
}
</style>
05-07-2019
