Vue.js Steam Chat


 
Thread Tools Search this Thread
Top Forums Web Development Vue.js Steam Chat
# 1  
Old 04-13-2019
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  
Old 04-13-2019
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  
Old 04-13-2019
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  
Old 04-13-2019
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  
Old 04-13-2019
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  
Old 04-13-2019
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  
Old 04-16-2019
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 Ask a Question

Previous Thread | Next Thread

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
Login or Register to Ask a Question