[全端开发] 打造一个公开聊天室 Vue.js+MySQL+Socket.io+passport-jwt

章节连结

这回实际演练来打造一个即时聊天室来练功,使用者可以分为管理员和一般资格。其中使用到的主力套件和技术有:Vue.js, MySQL, Socket.io, passwort & passport-jwt, JavaScript, CSS, Bootstrap。

web development chatroom


规格开设 (SPEC)

  • 使用者需要登入留言
  • 使用者可以注册帐号
  • 使用者可以即时看到自己和他人的讯息,无需刷新
  • 讯息需要有会员名称、时间和讯息内容
  • 管理员和使用者都需要登入才能使用功能
  • 管理员有后台可以看到所有的会员资料
  • 管理员可以针对会员资料做新增
  • 管理员可以删除会员资料

资料夹结构


事前准备

请先安装好 git, heroku, nodejs, vue 的指令,并可以回传对应的版本号。(表示安装成功)

建置和测试步骤

1.建立初始资料夹

2.编辑 server 的 package.json

3.在 /server 下新增 .sequelizerc,并编辑之

4.安装 server 所需套件
5.在 /chatroom 内新增并编辑 app.js,并修改存取前端页面的资料夹。当为 production mode的时候,读取 server 目录下的 dict 资料夹。换言之,到时候前端页面打包的输出资料夹就得在这个指定位置里。完整设定请看 Github 里的内容,这边只摘要部分。

6.执行 npx sequelize dB:generate 类的指令,产生 model, seeder 资料等,将内容依照 ERD 修改。因为有 .sequelizerc 了,所以产生的资料夹和档案会在 /server 内,并能成功读取。
7.
打开 MySQL Workbench 之类的工具,在本机端建立数据库,名称要和你在 server 的 package.json 的名称是一样的
8.执行 npx sequelize db:migrate & npx sequelize db:seed:all
9.在 /server/router 资料夹内设置对应的 api 路径
10.将记载者要如何跟后端数据库做互动的方法独立写在 /server/controller 内,再加载到 api 路径中

11.运用 Postman 工具,测试一下 api 能否正确回传 .json 档案
12.
在 /chatroom 下,使用 vue create client,并采用默认的 ESLInt , 不使用 history mode
13.
cd client,并安装前端所需的套件。( axios, bootstrap, vuex, vue-router)

14.在 /chatroom/client 下新增 vue.config.js,设定输出资料夹和代理服务器位置,将前端发出的 http://localhost:8080 对应到后端的 http://localhost:3000

15.新增登入页面,并测试后端是否可以接收到,这时多半会跑出 CORS 错误
16.将 Server 内的 app.js,新增 app.use(cors()),小心不要忘记()
17.
再测试是否可以回传 json 讯息
18.
后端 server 设置 passport-jwt
19.在前端页面测试可否传回对应的使用者 json,权限设置正确
20.用 vuex 向后端取得设定档,并在每个 view 内以 …mapState 的方法取得 vuex 内的状态,详情参见:[笔记] Vue 的状态管理 Vuex 实作心得
21.开发非 socket.io 即时聊天的部分
22.开发需 socket.io 协助的部份
23.调整 css 版型,优惠使用者体验
24.撰写测试
25.进行heroku 布署前作业,取得子目录网址

26.修正后台数据库网址成发布版本(也就是上一步取得的 heroku 网址)
27.
在 /chatroom/client 资料夹下执行 npm run build,会发觉生成一个 public 资料夹就在 server 资料夹内
28.将后端 server 的 api 网址的 app.use(‘/’) 给取消掉,否则会无法显示首页
29.推到 heroku 上,测试可否正常运作
30.编写 README.md 档案



参考资料

1.node.js搭建接口(七):Node-使用passport-jwt验证token
2.Node.js 实作 The F2E_ChatRoom (1) 环境建置
3.[Node.js]Socket.io
4.Vue-Socket.io DEMO
5.express 搭配 mongodb 建立聊天室
6.Socket.IO使用技巧(一)
7.Vue-Socket.io的使用
8.vuex+socket.io实现实时私聊功能
9.Node.js + Web Socket 打造即时聊天程序
10.使用socket.io遇到的一些坑
11.vue中使用 vue-socket.io


按赞加入粉丝团

延伸阅读