H2Nas01NginxMarkdown

§2023-08-09

Build a real-time chat app with Vuejs, socket.IO, and Nodejsby Solomon Eseme Updated Sun Jun 18 2023
Source Codes for this Article
試作機器： hc4Lunar.yushei.net

¶Create directory and install requirements

Create Directory

$ pwd
/home/alexlai/vue-proj
$ mkdir ChatApp && cd $_

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (chatapp) 
version: (1.0.0) 
description: chatapp uisng vue.js and sockeIO
entry point: (index.js) 
test command: 
git repository: 
keywords: chat vue.js socketIO
author: alexlai@munetaka.me
license: (ISC) 
About to write to /home/alexlai/vue-proj/ChatApp/package.json:

{
  "name": "chatapp",
  "version": "1.0.0",
  "description": "chatapp uisng vue.js and sockeIO",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "chat",
    "vue.js",
    "socketIO"
  ],
  "author": "alexlai@munetaka.me",
  "license": "ISC"
}


Is this OK? (yes) 
$ tree -L 1
.
└── package.json

1 directory, 1 file

package.json

{
  "name": "chatapp",
  "version": "1.0.0",
  "description": "chatapp uisng vue.js and sockeIO",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "chat",
    "vue.js",
    "socketIO"
  ],
  "author": "alexlai@munetaka.me",
  "license": "ISC"
}

DEPENDENCIES INSTALLATION.

$ npm install --save express
$ npm install --save socket.io

package.json

{
  "name": "chatapp",
  "version": "1.0.0",
  "description": "chatapp uisng vue.js and sockeIO",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "chat",
    "vue.js",
    "socketIO"
  ],
  "author": "alexlai@munetaka.me",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "socket.io": "^4.7.2"
  }
}

¶FRONT-END WITH VUEJS (MARKUP)

In the front-end, we will be using Vue.js, let’s move to install Vue on our directory and also [bootstrap 4.3.1(https://getbootstrap.com/)

[getbootstrap.com](https://getbootstrap.com/

Create an index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ChatApp_Socket</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="col-lg-6 offset-lg-3">

                <div v-if="ready">
                    <p v-for="user in info">
                        {{user.username}} {{user.type}}
                    </p>
                </div>

                <div v-if="!ready">
                    <h4>Enter your username</h4>
                    <form @submit.prevent="addUser">
                        <div class="form-group row">
                            <input type="text" class="form-control col-9" v-model="username"
                                placeholder="Enter username here">
                            <input type="submit" value="Join" class="btn btn-sm btn-info ml-1">

                        </div>
                    </form>
                </div>
                <h2 v-else>{{username}}</h2>
                <div class="card bg-info" v-if="ready">
                    <div class="card-header text-white">
                        <h4>My Chat App <span class="float-right">{{connections}} connections</span></h4>
                    </div>
                    <ul class="list-group list-group-flush text-right">
                        <small v-if="typing" class="text-white">{{typing}} is typing</small>
                        <li class="list-group-item" v-for="message in messages">
                            <span :class="{'float-left':message.type === 1}">
                                {{message.message}}
                                <small>:{{message.user}}</small>
                            </span>
                        </li>
                    </ul>

                    <div class="card-body">
                        <form @submit.prevent="send">
                            <div class="form-group">
                                <input type="text" class="form-control" v-model="newMessage"
                                    placeholder="Enter message here">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

¶SETTING UP OUR SERVER.

Create a server.js, inside the server.js file, let’s create and configure the express server to work with Socket.IO.

server.js

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
});


http.listen(3000, () => {
    console.log('Listening on port *: 3000');
});

Return to Top