开源项目学习——基于Pusher和Vue构建即时聊天平台（一）

---

前言

我们将使用由channels(Pusher提供)提供的Vue.js构建一个实时聊天应用程序。channels服务将提供一个跨平台的完整后端，让我们专注于构建一个通过channels客户端包连接到channels服务的前端用户界面。
该开源项目原本使用ChatKit，但Pusher已停止维护该服务，并推出了新的channels作为替代。

一、项目情况

项目将实现以下功能：

• 多通道和房间
• 房间成员列表和在线状态展示
• 用户正在输入状态

与原开源项目区别

• 将聊天服务由ChatKit迁移至channels
• 界面优化
• 文字替换为中文

二、项目配置

首先确保安装node和vue，本文使用node-v13.12.0，vue Cli 4，如果需要管理不同版本node，推荐使用nvm。

全局安装cli

npm install -g @vue/cli

在对应目录下打开终端，用脚手架创建名为vue-channels的项目

vue create vue-channels

手动选择保存时检查代码，history模式router等

github上有开源的loading样式文件loading.min.css和ldbtn.min.css，本文末尾给出了他们的github链接。

项目目录结构：

安装项目依赖

npm i pusher bootstrap-vue moment vue-chat-scroll vuex-persist

• pusher, 开源聊天组件
• bootstrap-vue, 推特推出的开源CSS框架
• moment, 日期时间格式化工具
• vue-chat-scroll, 添加新内容时自动滚动到底部
• vuex-persist, 在浏览器本地保存Vuex状态

核心文件main.js

import Vue from "vue";
// 引入组件
import BootstrapVue from 'bootstrap-vue';
import VueChatScroll from 'vue-chat-scroll';

import App from "./App.vue";
import router from "./router";
import store from "./store/index";

// 引入全局样式
import 'bootstrap/dist/css/b