Vue.js Steam Chat


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
Vue.js Steam Chat

This Vue.js chat component installed easily:

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

Image

Code:
<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
This User Gave Thanks to Neo For This Post:
# 2  
Here is the same chat, full width:

Image

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

# 3  
Quote:
Originally Posted by Neo
This Vue.js chat component installed easily:

Code:
npm i --save vue-steam-chat

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

Image

Code:
<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
This User Gave Thanks to RavinderSingh13 For This Post:
# 4  
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.
This User Gave Thanks to Neo For This Post:
# 5  
Reference for the next step in this caper:

Introducing the ChatEngine Plugin for Vue.js | PubNub


Quote:
... building a chat app is complicated. Architecting the back end can be done 100 different ways if 100 different software engineers are tasked with the same project. ChatEngine removes a lot of the thinking and inventing that would have been spent if you started from scratch.
# 6  
Thinking out loud:

One approach could be chats per person:

Image

Another Could Be Per Thread:

Image

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

Image

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