Vue.js Steam Chat

Neo · April 13, 2019, 9:13am

This Vue.js chat component installed easily:

npm i --save vue-steam-chat

I was able to set it up and change the background color in the component css file to match the forums in seconds:

<template>
  <div style="height: 600px; width: 300px;">
    <VueSteamChat :messages="messages" @vue-steam-chat-on-message="onNewMessage"/>
  </div>
</template>

<script>
import VueSteamChat from "vue-steam-chat";

// This is required for styling the component. You can also write your own stylesheet. You can find my styles inside the vue component
require("vue-steam-chat/dist/index.css");

export default {
  name: "vue-steam-chat",
  components: {
    VueSteamChat
  },
  data() {
    return {
      messages: [
        {
          time: 1506117496,
          username: "Gaben",
          text: "I am really rich!!!"
        },
        {
          time: 1506117500,
          username: "Solo",
          text: "But i am your employee"
        },
        {
          time: 1506117530,
          username: "Neo",
          text: "Hmmm..."
        }
      ]
    };
  },
  methods: {
    onNewMessage(message) {
      alert(message);
    }
  }
};
</script>

Next, I need to decide if and where to integrate this into the forums and if I should change it to be a modal or leave it flat.

Ravinder wants me to integrate this type of commenting system into each discussion, right below the first post, so everyone, even unregistered users can comment on every discussion, which is an interested idea.

Any more suggestions or ideas?

NPM ref: vue-steam-chat - npm

Neo · April 13, 2019, 9:20am

Here is the same chat, full width:

<template>
  <div style="height: 600px; width: 100%;">
    <VueSteamChat :messages="messages" @vue-steam-chat-on-message="onNewMessage"/>
  </div>
</template>

RavinderSingh13 · April 13, 2019, 9:24am

neo:

This Vue.js chat component installed easily:
npm i --save vue-steam-chat
I was able to set it up and change the background color to match the forums in seconds:

1096×693 44.1 KB
<template>
  <div style="height: 600px; width: 300px;">
   <VueSteamChat :messages="messages" @vue-steam-chat-on-message="onNewMessage"/>
  </div>
</template>

<script>
import VueSteamChat from "vue-steam-chat";

// This is required for styling the component. You can also write your own stylesheet. You can find my styles inside the vue component
require("vue-steam-chat/dist/index.css");

export default {
  name: "vue-steam-chat",
  components: {
   VueSteamChat
  },
  data() {
   return {
   messages: [
   {
   time: 1506117496,
   username: "Gaben",
   text: "I am really rich!!!"
   },
   {
   time: 1506117500,
   username: "Solo",
   text: "But i am your employee"
   },
   {
   time: 1506117530,
   username: "Neo",
   text: "Hmmm..."
   }
   ]
   };
  },
  methods: {
   onNewMessage(message) {
   alert(message);
   }
  }
};
</script>
Next, I need to decide if and where to integrate this into the forums and if I should change it to be a modal or leave it flat.

Ravinder wants me to integrate this type of commenting system into each discussion, right below the first post, so everyone, even unregistered users can comment on every discussion, which is an interested idea.

Any more suggestions or ideas?

Hello Neo,

Thank you for considering the thought. Following are the more clear points which I was mentioning in today's call.

Chat system between members is different from commenting on posts, where only members could chat with each other. Yes, we have to give authority to person(who is receiving the ping) that he/she wants to chat or not.

Now coming on comments part, IMHO comments should NOT stick to only very first post, comments could be done on any post of a thread(off course NOT on closed ones). Yes, we could involve unregistered users but not sure then how much spamming will happen in it(so this we unregistered users commenting we could discuss once)

Thanks,
R. Singh

Neo · April 13, 2019, 9:41am

My current idea(nothing concrete just thinking out loud) is to:

Create a new "show discussion" page in the new UI (the UserCP).
Integrate the chat as a sidebar which slides in and out.
Permit everyone to comment on the discussion in the sidebar chat, including unregistered users, anyone.
If spam becomes a problem, just create a filter for unregistered users, or block them.

I tried a number of editors for posting code in the user UI, and none are as good (or even close) to what we have now in the main forums.

So my idea is to create a "meta" version in the new UI which will not be posting, but commenting chat style on the posts, without effecting the main forums. Our "main editor" in the forums is quite good.

Then, maybe (if it becomes useful or popular) create a small app for the main forum which shows the comments from the new UI into the main forums.

Something like that, but we need to discuss it more before I start creating DB tables and the AJAX logic for managing all the chat messages.

Basically, this is a nice chat app UI in Vue.js we can use in many different ways in the forums for both commenting on a post or chatting in general about a post.

Neo · April 13, 2019, 1:03pm

Reference for the next step in this caper:

Introducing the ChatEngine Plugin for Vue.js | PubNub

Neo · April 13, 2019, 2:31pm

Thinking out loud:

One approach could be chats per person:

Another Could Be Per Thread:

Or maybe none of the above.

Per thread, per forum, per user, or per tag, this will need to scale.

Let's keep dreaming about the possibilities and thinking out loud.

Then there are architectural questions like Socket.io versus PubNub .... decisions... decisions ...

Neo · April 16, 2019, 11:12am

Progress.

I have PubNub working in publish-subscribe mode in a rough and tumble way between two unix.com user accounts in two different browsers (Safari and Chrome) using two different URLs (one on the main site and one in local host).

Now, I just need to work on how to set up various publish and subscribe chat services on a user-to-user basis, permissions, subscriptions (join and unsubscribe), archiving the chats, etc. In other words, I have a long way to go to get something working that could replace the current PM system and be really cool, but I'm making progress.

With what I have already, I could build a member chat room for all users and guests (no permissions, no subscriptions, just a single chat room, using what I have scaffolded together right now; and I might create a single room for fun (and for testing) before moving on to more complex tasks.

I'm using the PubNub API and we get up to 1 Million transactions a month free, so we should be OK since the site is not very busy these days

Neo · April 16, 2019, 11:37pm

OK. UserCP Screeching Frog 0.7496

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.

Neo · April 17, 2019, 2:38am

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.

Neo · April 17, 2019, 6:15am

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:

Ref: UserCP Screeching Frog 0.7502

Neo · April 17, 2019, 7:42am

Seems chat is kinda working ok, but need a lot of work:

Neo · April 17, 2019, 8:36am

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.

<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>

Neo · April 17, 2019, 1:03pm

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.

Neo · April 17, 2019, 10:59pm

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.

Neo · April 18, 2019, 5:58am

Today, I'm back in a tech session with PubSub about loading message history when someone starts the session / joins the page.

..... and so when I console log time, I can see that the channel saves all the prior history after the pages is loaded or reloaded; but if I reload the page, the history is not loaded from the server, as if the PubNub Storage API is not persistent across sessions, because the expected behavior is when someone opens their app and this page, they will see the chat / message history on that channel; so there seems to be no "autoload' really happening when the session starts.

I have just console logged the above, and of course the this.ch1 array grows with each message, but that information is gone when the page is reloaded, so there is really no history at all coming from the PubSub API when someone joins the channel. The only "history" is in a session which has already started, and this is not useful at all, because we need for users to see the message history on the channel when they first join the channel.

Neo · April 18, 2019, 8:10am

UserCP Screeching Frog 0.7514

I was able to get message history working within a vue-pubnub project sans any help from PubNub.

Basically, message / chat history is working in version 0.7514

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

Now, I need to write some hybrid code to show the number of members in the chat, their names, etc. and add more features.

The PubNub folks said doing this in Vue.js is "pioneering" work and few have done it; so I guess after months at it, I'm finally getting caught up to the state-of-the-art (or getting closer),

Neo · April 19, 2019, 2:02am

I'm moving on to another thread on this topic.

REF:

https://www.unix.com/what-is-on-your-mind-/281750-live-chat-alpha-usercp-sf-0-7517-a-new-post.html

pubnubcraig · April 19, 2019, 5:55pm

Neo - thanks for working with us at PubNub Support. We are actively working on updating the Vue SDK Docs with at least an "OUTDATED" message in the short term and long term, a new Vue SDK that lives up to the JavaScript SDK. Not sure how that Vue SDK got released in that condition but again, thanks for vetting it and reporting back to us.

We'll (SDK engineer manager and I) be in touch with more very soon.
Cheers
Craig