To see how the final project looks like check github repository below:
https://github.com/jaouadballat/ChatExpress
First of all we need to setup vue project by running this commang in our terminal:
vue create chat-app
Edit App.vue:
<template>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<Chat />
</div>
</div>
</div>
</div>
</template>
<script>
import Chat from './components/Chat.vue'
export default {
name: 'app',
components: {
Chat
}
}
</script>
<style>
</style>
App.js
Create Chat.Vue:
<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">
</div>
</div>
</div>
<div class="card-footer">
<form @submit.prevent="sendMessage">
<div class="gorm-group">
<label for="user">User:</label>
<input type="text" v-model="user" class="form-control">
</div>
<div class="gorm-group pb-3">
<label for="message">Message:</label>
<input type="text" v-model="message" class="form-control">
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
</div>
</template>
Chat.vue
To style our compenents we need to add Boostrap resources in our index.html file or use npm to install it.
2.Create Server folder:
We need also to install express js to work with in our backend, for that we need to create a folder called server in our root directory, than initiate it by runnig:
npm init
after that we need to add Express.js in our backend folder
const express = require('express');
const app = express();
server = app.listen(3001, function(){
console.log('server is running on port 3001')
});
app.js
Run the server in your terminal by running nodemon app.js
Install socket.io package using npm install — save socket.io and require it in our app.js server file, then establish a basic connection:
const express = require('express');
const app = express();
const server = app.listen(3001, function() {
console.log('server running on port 3001');
});
const io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log(socket.id)
});
socket
Now lets switch back to the client side, in Chat.vue we need ‘socket.io-client’ npm package:
npm install --save socket.io-client
import io from 'socket.io-client';
export default {
data() {
return {
user: '',
message: '',
messages: [],
socket : io('localhost:3001')
}
},
methods: {
sendMessage(e) {
e.preventDefault();
}
},
Chat.vue
Now in terminal which we are running the server we should see the socket.id printed out in the console. This is the output you should get:
In our Chat.vue component we neet to add sendMessage function where we are going to send a message to server via socket.io :
methods: {
sendMessage(e) {
e.preventDefault();
this.socket.emit('SEND_MESSAGE', {
user: this.user,
message: this.message
});
this.message = ''
}
},
methods
In app.js we are listening to socket message comming from Chat.vue component:
const express = require('express');
const app = express();
const server = app.listen(3001, function() {
console.log('server running on port 3001');
});
const io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log(socket.id)
socket.on('SEND_MESSAGE', function(data) {
io.emit('MESSAGE', data)
});
});
app.js
Then we emitting the data that we are receiving to all client listnenig to this server.
Back to our client folder we received the data comming from our server vie socket.io when the component mounted:
mounted() {
this.socket.on('MESSAGE', (data) => {
this.messages = [...this.messages, data];
// you can also do this.messages.push(data)
});
}
mount
This is how our Chat.vue will looks like at the end:
<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>
</div>
</div>
</div>
<div class="card-footer">
<form @submit.prevent="sendMessage">
<div class="gorm-group">
<label for="user">User:</label>
<input type="text" v-model="user" class="form-control">
</div>
<div class="gorm-group pb-3">
<label for="message">Message:</label>
<input type="text" v-model="message" class="form-control">
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
</div>
</template>
<script>
import io from 'socket.io-client';
export default {
data() {
return {
user: '',
message: '',
messages: [],
socket : io('localhost:3001')
}
},
methods: {
sendMessage(e) {
e.preventDefault();
this.socket.emit('SEND_MESSAGE', {
user: this.user,
message: this.message
});
this.message = ''
}
},
mounted() {
this.socket.on('MESSAGE', (data) => {
this.messages = [...this.messages, data];
// you can also do this.messages.push(data)
});
}
}
</script>
<style>
</style>
Chat.vue
And this is how our server looks like:
const express = require('express');
const app = express();
const server = app.listen(3001, function() {
console.log('server running on port 3001');
});
const io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log(socket.id)
socket.on('SEND_MESSAGE', function(data) {
io.emit('MESSAGE', data)
});
});
server
Recommended Courses:
☞ Learn Web Development Using VueJS
☞ Learn by Doing: Vue JS 2.0 the Right Way
☞ Vue.js 2 Essentials: Build Your First Vue App
☞ Getting started with Vuejs for development
☞ Horizontal Feed Component with Sass and VueJs 2
☞ Build a Real Time Chat App With Node.js
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ JavaScript for React Developers | Mosh
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch