使用Pusher和vue.js构建实时聊天应用

>该教程通过使用vue.js和Pusher的Chatkit服务来构建实时聊天应用程序。 我们将重点关注前端，利用Chatkit的后端功能来用于用户管理和房间创建。

密钥功能：

>多通道/房间支持。实时成员存在检测。
• 键入指示器。

>先决条件： 假定中间至高级vue.js，vuex和css框架（如这里使用的bootstrap-vue）。 必须安装node.js和vue cli：

npm install -g @vue/cli

项目设置：

创建一个vue.js项目：

1. 选择手动功能选择，然后选择Babel，Vuex和Vue Router。

   vue create vue-chatkit

   >安装依赖项：

2. npm i @pusher/chatkit-client bootstrap-vue moment vue-chat-scroll vuex-persist

   >创建必要的文件夹结构和文件（如原始教程的图像所示）。 从loading.io下载
和

3. loading.css loading-btn.csssrc/assets/css> chatkit设置：

>在Pusher的网站上创建一个ChatKit实例。 >创建用户（例如，“约翰”，“盐”，“狩猎”）和房间（例如，“一般”，“武器”，“战斗”）。

注意

实例定位器
1. >
>从
2. cordentials tab测试令牌提供商URL
3. 。 启用测试令牌提供商。>
>环境变量：

>在项目root上创建一个

文件，然后添加：

>

vue.js开发：

.env.local>教程详细介绍了VUE组件的创建（登录名，chatnavbar，roomlist，userList，Messagelist，MessageForm）及其与VUEX的集成以进行状态管理。 这些组件的代码以及VUEX动作和突变的代码在原始教程中得到了广泛的描述。 该过程涉及连接到Chatkit，订阅房间，处理消息，存在更改和打字指标。 在页面刷新和错误处理后重新连接也将实现。

>

<code>VUE_APP_INSTANCE_LOCATOR=<your_instance_locator>
VUE_APP_TOKEN_URL=<your_token_url>
VUE_APP_MESSAGE_LIMIT=10</code>

>本教程以一个全面的常见问题解答部分结束，该部分涉及使用vue.js和Pusher构建实时聊天应用程序的各个方面。 完整的代码可在GitHub上找到（原始教程中提供的链接）。 切记用您的实际chatkit凭据替换占位符值。

以上是使用Pusher和vue.js构建实时聊天应用的详细内容。更多信息请关注PHP中文网其他相关文章！