Vue.js Steam Chat


Login or Register for Dates, Times and 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 for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

5 More Discussions You Might Find Interesting

1. Web Development

Documenting Installation Problem with vue-beautiful-chat

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%... (2 Replies)
Discussion started by: Neo
2 Replies

2. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

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: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

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: ... (0 Replies)
Discussion started by: Neo
0 Replies

4. What is on Your Mind?

Very Funny and Somewhat Amazing 2006 Chat Bot Chat

Working on the badging system, Just found this old thread for 2006 and started reading it. ROTFL ... what a great discussion between forum members and our chat bot Gollum "back in the good old days"... You must check this out if you want a laugh and big smile: ... (1 Reply)
Discussion started by: Neo
1 Replies

5. Web Development

Can you embed Skype or any other video chat/chat program into a webpage?

Hi, I am trying to embed Skype or any other video chat/chat program into a webpage. Has anyone had success doing this? or know how? Thanks Phil (2 Replies)
Discussion started by: phil_heath
2 Replies

Featured Tech Videos