Chat Nodejs + Vuejs
nodejs
74
vuejs
4
Male avatar

skipperhoa viết ngày 19/06/2018

Nay mình xin chia sẻ với mọi người cách tạo một ứng dụng chat bằng ngôn ngữ lập trình Nodejs + Vuejs để xây dụng ứng dụng chat
Đầu tiên bạn cần phải hiểu chút ít về Nodejs và Vuejs nhé
Bắt đầu thôi nào!
Chat nodejs vuejs
Bước 1: Bạn tạo project thư mục chat-nodejs-vuejs và chạy câu lệnh: npm init để tạo package.json
Bước 2:Bạn copy cái package.json bên dưới đây để thay đổi lại cái package.json mới tạo ban đầu, sau khi save lại bạn chạy câu lệnh: npm install để cài đặt tất cả các thư viện trong package.json đã khai báo

{
  "name": "chat-nodejs-vuejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "skipperhoa",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "babel-runtime": "^6.25.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue": "^2.4.2",
    "vue-router": "^2.7.0",
    "vue-axios": "^2.0.2",
    "vue-loader": "^13.0.2",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "jsonfile": "^4.0.0",
    "mongoose": "^5.0.12",
    "multer": "^1.3.0",
    "nodemon": "^1.17.2",
    "socket.io": "^2.1.0"
  }
}

Các bước chuẩn bị đã hoàn thành giờ ta đi vào tạo từng file cho ứng dụng thôi nào!
Cấu trúc thư mục project như sau, bạn có thể nhìn vào tạo theo nhé
cau truc project
Bạn tạo một thư mục src/components trong project chat-nodejs-vuejs bạn vừa tạo ban đầu,để tạo một file Boxchat.vue nằm trong thư mục components

<style>
    #box-chat{
        margin-top:10px;
    }
    .show-message{
        width:100%;
        border:1px solid #ccc;
        height:300px;
        padding:10px;
        box-sizing:border-box;
    }
    #btnChat{
        width:100%;

    }

    .sms-1{

       padding:5px;
       margin:2px 0px;
        box-sizing:border-box;
        border:1px solid #ccc;
        clear:both;
        float:left;
    }
    .username{
        color:red;
        font-weight:bold;
    }
</style>
<template>
    <div class="row" id="box-chat">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <img src="https://hoanguyenit.com/public/img/logo33.png"/>
            <div class="alert alert-success">
                 { { title}}
            </div>
            <div class="show-message">


            </div>
            <form action="http://localhost:3000/" method="post">
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control" placeholder="Enter username" id="user"/>
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <input type="text" class="form-control" placeholder="Enter message" id="message"/>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-danger" id="btnChat">Send Message</button>
                </div>
            </form>


        </div>
        <div class="col-md-2"></div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                title:"Form chat Nodejs + Vuejs"
            }
        }
    }

</script>

Bước tiếp theo bạn ra ngoài thư mục src. Để tạo các file như (main.js,App.vue) , bạn copy source bên dưới và dán vào nhé!
Source App.vue

<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{
    }
</script>

Source main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios,axios);

//import template vuejs
import App from './App.vue';
import Boxchat from './components/Boxchat.vue';
Vue.use(VueRouter)
const routes = [
  {
        name: 'Boxchat',
        path: '/',
        component: Boxchat
    },

];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

main.js: dùng để import các thư viện của vuejs và import các component của vuejs, bên cạnh đó bạn còn phải thiết lập routes để điều hướng url của trang

Tiếp tục để chạy được Vuejs bạn cần phải tạo một cái webpack.config.js nằm cùng cấp với thư mục project của bạn nhé, bạn copy source bên dưới và dán vào file webpack.config.js vừa tạo nhé

// webpack.config.js
module.exports = {
    // This is the "main" file which should include all other modules
    entry: './src/main.js',
    // Where should the compiled file go?
    output: {

      filename: 'bundle.js'
    },
    resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
    module: {
      // Special compilation rules
      loaders: [
        {
          // Ask webpack to check: If this file ends with .js, then apply some transforms
          test: /\.js$/,
          // Transform it with babel
          loader: 'babel-loader',
          // don't transform node_modules folder (which don't need to be compiled)
          exclude: /node_modules/
        },
        {
          // Ask webpack to check: If this file ends with .vue, then apply some transforms
          test: /\.vue$/,
          // don't transform node_modules folder (which don't need to be compiled)
          exclude: /(node_modules|bower_components)/,
          // Transform it with vue
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  },
  devServer: {
         port: 3000
     }
  }

Tiếp tục bạn tạo cho mình một file index.html nằm cùng cấp với project nhé, bạn có thể kéo lên và xem lại cấu trúc thư mục project của mình và tạo giống vậy nhé!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VueJS NodeJS and Express example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://localhost:8888/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(function () {
        var socket = io.connect("http://localhost:8888");
        $('form').submit(function(event){
             event.preventDefault();
             var data = {
                 user:$("#user").val(),
                 message:$("#message").val()
             }
             socket.emit('data-message', data);
        });
        socket.on('send-message', function(msg){

            var chuoi ='<span class="sms-1"><i class="username">'+msg.user+'</i>:'+msg.message+'</span>';
            $('.show-message').append(chuoi);
        });
    });
    </script>
</head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Các bạn chú ý đến phần head mình có gọi thư viện socket.io của nodejs vào file, kèm theo là một cái port:8888, mình chạy port này cho Nodejs, còn Vuejs thì mình để mặc định của webpack là port 3000

Socket.on nó có tác dụng nó nhận bên phía server trả về và lúc đó bạn có thể hiện lên màn hình cho người dùng xem

Socket.emit có tác dụng bạn gửi dữ liệu về server để server xử lý, và cũng đồi hỏi bên phía server cũng phải có một socket chấp nhận connect từ dữ liệu được client gửi về phía server.

Giờ là bước quan trọng đễ chạy được nodejs chúng ta cần phải tạo một file để chạy NodeJS , giờ bạn tạo cho mình file app.js và copy source bên dưới dán vào nhé!

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use(bodyParser.json());

io.on('connection',function(socket){
    socket.on('data-message',function(msg){
        var data = {
            user: msg.user,
            message:msg.message
        }
       io.emit('send-message', data);
    });
});

http.listen(process.env.PORT || 8888, function(){
    console.log('listening on *:8888');
});

File app.js dùng để chạy nodejs lên, khi ta gõ node app.js để chạy, trong file này dùng import các thư viện express, socket.io và tạo port lắng nghe kết nối
Các bạn xem io.on('connection') dùng để connect bên client gửi dữ liệu về cho server, để chập nhận kết nối
io.emit: dùng để gửi dữ liệu ngược lại cho client

Giờ mình đã tạo xong các bước để chạy nodejs và vuejs, giờ bạn có thể chạy xem cảm giác về tốc độ của nodejs cùng với sự kết hợp với Vuejs sẽ là một điều rất tuyệt vời, giờ còn chờ gì nữa chạy thôi nào!
Bước 1: khởi động Vuejs trước bằng câu lệnh: npm start
Bước 2: khởi động chạy Nodejs bằng câu lệnh: node app.js
bạn sẽ thấy như sau khi chạy 2 câu lệnh trên:

hinh1
Sau khi bạn thấy đã báo successfuly bạn có thể gõ câu lệnh trên trình duyệt website như sau:http://localhost:3000
hinh2
Bạn nhớ là Vuejs chạy port:3000 còn Nodejs chạy port:8888 nhé
Chúc các bạn làm thành công nhé! hẹn mọi người với chia sẽ kiến thức tiếp theo!
Bài viết gốc được đăng tải tại:Chat NodeJS + VueJS

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

skipperhoa

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
1 0
Lâu lâu không động vào nodejs không biết mấy ông tool tiếc này đi đâu về đâu rồi. Trước đây thì mình vẫn có thể dùng istanbul với mocha đơn giản th...
Hoàng Duy viết 2 năm trước
1 0
White
5 1
Xử lý đồng bộ một mảng bằng Promise thay cho async.eachSeries Tựa Đang muốn chạy một hàm trong đó xử lý đồng bộ từng phần tử trong một mảng, do g...
Cuong Pham viết 2 năm trước
5 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!