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
Logo

前往低代码交流专区

更多推荐