Vue.js Steam Chat


Login or Register to Reply

 
Thread Tools Search this Thread
# 8  
OK. UserCP Screeching Frog 0.7496

Code:
https://www.unix.com/usercp/#/chatroom

I mistakenly thought (or was at least hoping) when someone joins a chatroom using PubNub that they would get the prior messages, but they don't. I guess that makes since, but I need to look into this a bit further.

Also, need to look creating a lobby function which shows all users connected to the chatroom, etc. Well, it's a start and it "kinds works" but needs a lot more features to be useful. At least the basic pub-sub is working, that's a start.

Image
# 9  
Update:

For some reason, I cannot the presence to work in the vue-pubnub API.

this.$pnGetPresence()

There is no error, but it returns nothing and no status to check.

Opened a ticket with PubNub support.
# 10  
Great. Slowing debugging some of the features of vue-pubnub.

Today I'm working with PubNub tech support trying to get the presence and history to work:

Image


Ref: UserCP Screeching Frog 0.7502
# 11  
Seems chat is kinda working ok, but need a lot of work:

Image
# 12  
UserCP Screeching Frog 0.7506

Here is my current Vue.js component for this chat I'm working on at the moment.

Still needs a lot of work, for example it's a good idea to announce when someone visits the page (join), etc. I'm still trying to understand the PubNub vue-pubnub APIs.


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>

# 13  
I have having numerous issues with PubNub's API, documentation (lack of it), very slow web site response and poorly designed user admin area.

I may take a break and retool this new chat feature using a different library, for example: socket.io.

Frankly, I'm disappointed with PubNub after working with it for a number of days, as well as working with their technical support team most of today.

So, I think I'll look for a different JS lib for pub-sub before going any further with PubNub.
# 14  
After looking at socket.io for pub sub, I think I'll give PubNub another try.

Currently I am experiencing two problems with PubNub:
  • Race condition which makes presence work inconsistently. This effects how we see who is online and available to participate in chats, for example. I worked with PubNub tech support and they concluded they had a race condition causing the problem.
  • Message history is not working with PubNub. When we reload a page, we do not see any messages prior to the reload of the page. I have asked PubNub to work with me on fixing this issue and putting the above issue on hold for a while.

Also, there is another problem with PubNub related to Vue.js:
  • When we navigate to the page (in this case a chat page), sometimes we need to reload the page (Command R) for the page to render.

This a a minor issue I think I can fix when and if I get PubNub presence and history to work.
This User Gave Thanks to Neo For This Post:
Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Documenting Installation Problem with vue-beautiful-chat
Neo
REF: https://github.com/mattmezza/vue-beautiful-chat $ git clone https://github.com/mattmezza/vue-beautiful-chat.git Cloning into 'vue-beautiful-chat'... remote: Enumerating objects: 534, done. remote: Total 534 (delta 0), reused 0 (delta 0), pack-reused 534 Receiving objects: 100%...... Web Development
2
Web Development
Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series
Neo
A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ...... Web Development
0
Web Development
Simple Vue.js Component to Redirect to External Web Page Using Vue Router
Neo
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ...... Web Development
0
Web Development

Featured Tech Videos