Skip to content

Instantly share code, notes, and snippets.

View jaouadballat's full-sized avatar
🏠
Working from home

Jaouad Ballat jaouadballat

🏠
Working from home
View GitHub Profile
<template>
<div class="card mt-3">
<div class="card-body">
<div class="card-title">
<h3>Chat Group</h3>
<hr>
</div>
<div class="card-body">
<div class="messages" v-for="(msg, index) in messages" :key="index">
<p><span class="font-weight-bold">{{ msg.user }}: </span>{{ msg.message }}</p>
mounted() {
this.socket.on('MESSAGE', (data) => {
this.messages = [...this.messages, data];
// you can also do this.messages.push(data)
});
}
const express = require('express');
const app = express();
const server = app.listen(3001, function() {
console.log('server running on port 3001');
methods: {
sendMessage(e) {
e.preventDefault();
this.socket.emit('SEND_MESSAGE', {
user: this.user,
message: this.message
});
this.message = ''
}
import io from 'socket.io-client';
export default {
data() {
return {
user: '',
message: '',
messages: [],
socket : io('localhost:3001')
}
const express = require('express');
const app = express();
const server = app.listen(3001, function() {
console.log('server running on port 3001');
});
const express = require('express');
const app = express();
server = app.listen(3001, function(){
console.log('server is running on port 3001')
});
<template>
<div class="card mt-3">
<div class="card-body">
<div class="card-title">
<h3>Chat Group</h3>
<hr>
</div>
<div class="card-body">
<div class="messages">
<template>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<Chat />
</div>
</div>
</div>
</div>
<template>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<img :src="product.image" :alt="product.name" class="img-fluid">
<h5>{{ product.name }}</h5>
<p><span class="font-weight-bold">Category</span>: {{ product.category }}</p>
<p class="text-danger font-weight-bold">${{product.price}}</p>
<p>