Nuxt.js mini聊天室开发 (mini-chatroom)

mini聊天室开发 (mini-chatroom)

Vue + Nuxt + Koa + WebSocket

• 前端：Vue + Nuxt + WebSocket
• 后端：Koa + WebSocket

Node.js 开发环境安装

1. 安装 Git 命令行客户端：敲开程序世界大门的钥匙，通过它，访问全世界的各式各样的代码库、组件

2. 安装 Node 稳定版：Javascript 服务端运行引擎

3. 安装 yarn，另一个包管理器

   • Ubuntu，通过 apt 安装:

     
     ## 配置 sources
     
     curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     
     ## 安装
     
     sudo apt-get update && sudo apt-get install yarn
     

   • Windows, 到这里下载：https://yarnpkg.com/zh-Hans/docs/install
   • Mac, 使用 ew 安装：
     brew install yarn

4. 使用中国的 npm 镜像，taobao 或 cnpm

   1. 安装 nrm:
      npm install -g nrm
#or
yarn global add nrm

   2. nrm use taobao or nrm use cnpm
5. 安装 visual studio code 开发环境

开始开发 - 从模板创建项目

1. 安装 vue-cli init
   
npm install -g @vue/cli
npm install -g @vue/cli-init
# or
yarn global add @vue/cli
yarn global add @vue/cli-init


2. 从模板创建项目：

   vue init nuxt-community/koa-template mini-chatroom


3. 运行
   
cd mini-chatroom
yarn
npm run dev


禁用ESlint

将nuxt.config.js文件中的注释掉

  build: {
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      // if (ctx.isClient) {
      //   config.module.rules.push({
      //     enforce: 'pre',
      //     test: /\.(js|vue)$/,
      //     loader: 'eslint-loader',
      //     exclude: /(node_modules)/
      //   })
      // }
    }
  }

项目概览

文件：

• package.json nodejs 项目的必须文件，描述项目的可用命令、包依赖
• nuxt.config.js nuxt 的主配置文件，描述 nuxt 如何构建、启动程序

目录：

• /layouts 布局文件
• /pages 存放所有页面
• /components vue 组件
• /server 为服务器端代码
• /static 静态文件目录

尝试修改

• 浏览器标题，更改为 迷你聊天室

创建登录页

• /pages/login.vue
• 添加登录按钮，用户名输入框
• 与UI进行交互
  
  • 获得 username
  • 响应登录按钮
  • 响应回车vag

使用pug做为html模板语言：

yarn add pug
yarn add -D pug-loader

创建聊天页面

• /pages/chat.vue

移除页面底部

• 编辑 /layouts/default.vue，删除 my-footer 组件

聊天的原理

nuxt+koa 的请求处理原理

编写服务端

• 安装 koa-body

GET /messages

接口：获取消息列表

POST /message

接口：发送消息

客户端调用接口

• 发送消息
• 进入聊天室时，获取最近的消息列表内容

实时消息同步

我们的消息发送后，无法直接同步给其他用户；需要F5刷新才能看到。如何做实时消息同步呢？

1. 拉：客户端轮询
2. 推：服务器推

思考，哪种方式更好？为什么好？

客户端轮询

1. setInterval
2. 消息有ID标识
3. 改造 GET /api/messages 接口，使之可以获取指定消息ID之后的所有消息

用户管理-v1

允许指定一个用户名进入聊天室

优化界面-前端

使之更漂亮

1. 引入 bulma 样式库
2. xxx

bulma

• Add @nuxtjs/bulma dependency using yarn or npm to your project
• Add @nuxtjs/bulma to modules section of nuxt.config.js

{
  modules: [
    '@nuxtjs/bulma'
  ]
}

删除原有的样式代码
* assets 中
* layouts/default.vue 中

水平居中，设定固定宽度

垂直居中

聊天界面

• 同样的设置满屏
• 控制栏在最底部，内容栏自由伸缩
• 内容栏内容超出视口时，设置让其滚动
• 接收到消息自动滚动显示最后一条消息
• 消息输入控件优化

响应式设计

表情符实现

emoji 实现

emoji 是什么，一种使用 unicode 编码来表示表情的“表情字符集”；

因此，emoji 表情，即字符

发送语音

• UI 变更
• getUserMeida 获取流
• 跟踪流长度
• 发送给服务器
• 服务器接收
• 服务器广播

UI 变更

• 聊天框，左边增加一个切换语音输入的按钮，点击切换为语音，并且中间的输入框变成 按钮样式
• 按下空格，或点下中间按钮，开始录语音，并显示录音状态
• 松开空格，或松开中间按钮，结束录语音

浏览器语音安全问题

HOST 设置绑定端口

export HOST=0.0.0.0 API_BROWSER_URL=https://192.101.1.17:3001 API_URL=http://192.101.1.17:3000  && npm run dev

部署

部署到公网上

export HOST=0.0.0.0 API_URL_BROWSER=http:// IP or DOMAIN && npm run dev

示例

export HOST=0.0.0.0 API_URL_BROWSER=http://chat.study.alphacoding.cn && npm run dev

部署到局域网

set HOST=192.xxx.xx.x
set API_BROWSER_URL=http://192.168.x.x:3000
set API_URL=http://192.168.x.x:3000
npm run dev