Ứng dụng trò chuyện nodejs

Từ lâu mình đã ấp ủ mình làm một ứng dụng trò chuyện để trò chuyện với bạn bè. Nghỉ dịch này, mình có nhiều thời gian để học thêm công nghệ mới và trong đó có Vuejs. Học thì phải đi đôi với hành nên mình vừa thực hành Vuejs tiện để thực hiện dự định của mình luôn

Mình sẽ viết lại quá trình mà mình thực hiện với dự án

$ yarn add vuex vue-router axios vue-axios socket.io-client

5. Các bạn cùng học và thực hành với mình nhé

Series này sẽ có các phần

1. Cài đặt môi trường phát triển VueJS, NodeJS, Express, SocketIO và đăng nhập xây dựng
2. Phát triển tính năng trò chuyện nhóm trò chuyện riêng tư
3. Hoàn chỉnh máy chủ phụ trợ, kết nối MongoDB, bổ sung các tính năng Xác thực và lưu trữ tin nhắn
4. Triển khai sản phẩm lên Netlify và Heroku

Và hôm nay chúng ta sẽ đến với phần đầu tiên của series này

---

I. Cài đặt môi trường

giao diện người dùng

With VueJS mình sử dụng Vue CLI để tạo project

Trước hết, các bạn cần cài đặt Vue CLI bằng npm

$ npm install --global vue-cli

Tạo dự án với Vue CLI

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

Cài đặt thư viện cần thiết

Để việc phát triển ứng dụng diễn ra nhanh chóng, mình sẽ sử dụng thành phần thư việc dành cho VueJS là Vuetify

$ vue add vuetify
  > Chọn Defalut

$ yarn add vuex vue-router axios vue-axios socket.io-client

Chạy dự án

$ vue serve

Configure the library

1. Vuetify

Khi chạy

$ yarn add vuex vue-router axios vue-axios socket.io-client

6 là vue đã tự động cấu hình

1. Vuex

cửa hàng / cửa hàng. js

import Vue from"vue";import Vuex from"vuex";

Vue.use(Vuex);const store =newVuex.Store({
  state:{},
  mutations:{},
  actions:{},
  getters:{},});exportdefault store;

chủ yếu. js

________số 8

1. Bộ định tuyến Vue

tuyến/bộ định tuyến. js

import Vue from"vue";import VueRouter from"vue-router";

Vue.use(VueRouter);const routes =[];const router =newVueRouter({
  routes,});exportdefault router;

chủ yếu. js

$ npm install --global vue-cli

0

1. Dotenv – Khởi tạo biến môi trường

env and. env. mặc định

$ npm install --global vue-cli

1

cấu hình/hằng số. js

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

0

phụ trợ

Với NodeJS – Express mình sẽ tạo project từ đầu

Các bạn tạo thư mục mới với tên dự án và mở thư mục đó lên thiết bị đầu cuối và thực hiện theo các bước sau

Khởi tạo

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

1

Cài đặt thư viện

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

2

Cấu trúc dự án

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

3

Thiết lập các công cụ phát triển

1. Nodemon – Tự động tải lại máy chủ khi có mã thay đổi

nodemon. json

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

4

1. Babel + jsconfig + đường dẫn tuyệt đối

babelrc. js

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

5

jsconfig. json

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

6

1. Dotenv – Khởi tạo biến môi trường

env and. env. mặc định

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

7

src/configs/hằng số. js

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

8

Thiết lập tập lệnh trong gói. json

$ vue create 
  > Chọn Defalut ([Vue2] babel, eslint)

9

Máy chủ tập tin mã

người phục vụ. js

$ vue add vuetify
  > Chọn Defalut

0

Chạy máy chủ

$ vue add vuetify
  > Chọn Defalut

1

Như vậy là đã hoàn thành phần thiết lập dự án, các bạn đang thử chạy cả backend và frontend

$ vue add vuetify
  > Chọn Defalut

2____31

Sau đó mở trình duyệt và vào địa chỉ http. //máy chủ cục bộ. 8080 và http. //máy chủ cục bộ. 4000 lượt xem chưa được nhé

Tiếp theo mình sẽ đến phần mã hóa

II. Cấu hình ổ cắm

Configure socket side client

ổ cắm/ổ cắm. js

$ vue add vuetify
  > Chọn Defalut

4

cửa hàng / cửa hàng. js

$ vue add vuetify
  > Chọn Defalut

5

Configure socket side server

cấu hình/ổ cắm. js

$ vue add vuetify
  > Chọn Defalut

6

Các bạn đã sửa lại toàn bộ máy chủ tập tin. js as after

người phục vụ. js

$ vue add vuetify
  > Chọn Defalut

7III. Xây dựng tính năng Đăng nhập

Với phần 1 của loạt bài này mình sẽ làm 2 màn hình.

$ yarn add vuex vue-router axios vue-axios socket.io-client

7 và

$ yarn add vuex vue-router axios vue-axios socket.io-client

8. Khi vào ứng dụng, màn hình Đăng nhập sẽ hiển thị yêu cầu người dùng nhập Tên, sau khi nhập xong tên sẽ chuyển sang trang Trang chủ là trang trò chuyện chính

Cụ thể quy trình công việc đăng nhập như sau

Ảnh 1. quy trình đăng nhập

• Nhập tên người dùng, sau đó máy khách kết nối với máy chủ socket và gửi thông tin tên người dùng mỏng. Ở phía máy chủ khi kết nối sẽ phát ra sự kiện “USER_INFO”, gửi thông tin tên người dùng và socketId về phía máy khách

• Sự kiện lắng nghe socket phía client “USER_INFO”, đợi khi socket gửi thông tin người dùng xuống, lưu vào Vuex store sau đó chuyển hướng sang trang Home

Khách hàng

trang/Trang chủ. vue

$ vue add vuetify
  > Chọn Defalut

8

trang/Đăng nhập. vue

$ vue add vuetify
  > Chọn Defalut

9

Ứng dụng. vue

$ yarn add vuex vue-router axios vue-axios socket.io-client

0

cửa hàng / cửa hàng. js

$ yarn add vuex vue-router axios vue-axios socket.io-client

1

ổ cắm/ổ cắm. js

$ yarn add vuex vue-router axios vue-axios socket.io-client

2

tuyến/bộ định tuyến. js

$ yarn add vuex vue-router axios vue-axios socket.io-client

3

ảnh 2. Giao diện Đăng nhập

Người phục vụ

Khi người dùng được kết nối, sẽ gửi lại thông tin người dùng về phía khách hàng

cấu hình/ổ cắm. js

$ yarn add vuex vue-router axios vue-axios socket.io-client

4Lời kết

OK có lẽ mình nên tạm dừng ở đây, ban đầu mình định làm

$ yarn add vuex vue-router axios vue-axios socket.io-client

9 ở phần này nhưng bài đã quá dài rồi