Code:
<template>
<div class="d-flex justify-content-around flex-wrap room">
<div class="col-md-12 box">
<div class="neo-chat-title" v-if="this.occupancy">People in Chat Room : {{ this.occupancy }}</div>
<VueSteamChat :messages="chatsub" @vue-steam-chat-on-message="onNewMessage"/>
</div>
<div>Reload this page if you do not see the chat window.</div>
</div>
</template>
<script>
import Vue from "vue";
import VueSteamChat from "vue-steam-chat";
import PubNubVue from "pubnub-vue";
require("vue-steam-chat/dist/index.css");
Vue.use(PubNubVue, {
subscribeKey: "secret-sub-key",
publishKey: "secret-pub-key",
// logVerbosity: true,
uuid: window.vbusername
});
export default {
name: "vue-steam-chat",
components: {
VueSteamChat,
PubNubVue
},
computed: {
uuid() {
if (this.$store.state.chatname) return this.$store.state.chatname;
else return "Guest " + Date.now;
},
chatsub() {
if (this.ch1.length > 0) {
this.text.push(this.ch1[this.ch1.length - 1].message);
return this.text;
} else return this.text;
}
},
data() {
return {
history: null,
occupancy: 0,
initdone: 0,
status: 0,
ch1: this.$pnGetMessage("ch1"),
// ch1: this.$pnGetMessage('ch1', null, 10),
text: [
{
time: 1506117496,
username: "Gaben",
text: "Chat initialized ..."
},
{
time: 1506117500,
username: "Solo",
text: "So, say something !!"
},
{
time: 1506117530,
username: "Neo",
text: "Hmmm ..."
}
]
};
},
methods: {
init() {
var initchat = this.$pnGetMessage("ch1");
if (initchat.length > 0 && this.initdone == 0) {
this.text.push(initchat);
this.initdone = 1;
}
},
presence(ps) {
this.occupancy = ps.occupancy;
console.log("neo ps: " + JSON.stringify(ps));
},
onNewMessage(message) {
let m = {
time: Date.now() / 1000,
username: this.uuid,
text: message
};
this.$pnPublish(
{
sendByPost: true,
channel: "ch1",
message: m
},
function(status, response) {
if (status.error) {
// handle error
console.log(status);
} else {
console.log("message Published w/ timetoken", response.timetoken);
}
}
);
}
},
beforeCreate() {
this.$pnSubscribe({
channels: ["ch1"],
//autoload: 10,
withPresence: true
});
},
mounted() {
this.$pnGetPresence("ch1", this.presence);
$(function() {
var input = document.getElementsByClassName("vue-steam-chat__textarea");
var button = document.getElementsByClassName("vue-steam-chat__button");
input[0].addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
button[0].click();
}
});
});
}
};
</script>
<style scoped>
.box {
height: 500px;
margin: 20px;
}
.neo-chat-title {
color: slategray;
font-size: 1.2em;
text-align: center;
margin: 10px;
}
.room {
margin-bottom: 20px;
}
</style>