laravel 使用vue_使用Laravel和Vue构建聊天应用

laravel 使用vue

It's been a while since I wrote about Laravel and thought I should do something fun with it. In this tutorial, I will show you how to build a web-based chat application using Laravel and Vue.js quickly. With a simple step by step guide, you will be able to create a system that supports user authentication and authorization before participating in a chat session.

自从我写了有关Laravel的文章以来，已经有一段时间了，我认为我应该对此做些有趣的事情。 在本教程中，我将向您展示如何使用Laravel和Vue.js快速构建基于Web的聊天应用程序。 借助简单的分步指南，您将能够创建一个支持用户身份验证和授权的系统，然后再参与聊天会话。

Due to the fact that Laravel is shipped with Vue.js by default, It is very easy to build single-page applications, handle frontend logic by creating Vue components and use them like you would use a regular HTML tag inside the blade template of Laravel.

由于默认情况下Laravel随Vue.js一起提供，因此很容易构建单页应用程序，通过创建Vue组件来处理前端逻辑并像使用Laravel刀片模板中的常规HTML标签一样使用它们。

To make this chat application fully functional, you will leverage CometChat chat infrastructure to enhance the sharing of instant messages.

为了使此聊天应用程序充分发挥功能，您将利用CometChat聊天基础结构来增强即时消息的共享。

我们将建立什么 ( What we will build )

At the end of this tutorial, you would have built a system that will allow users to send and receive messages in realtime, as shown below:

在本教程的最后，您将构建一个系统，该系统将允许用户实时发送和接收消息，如下所示：

To join a chat session, a user will have to provide a unique username and password as credentials during the registration process, afterward, such user will be created on CometChat as well. This means when registering a new user within your application, the details of such users will be saved in your local database first and then sent to the CometChat server using its REST API. Laravel will be used to build a backend API needed for these processes and make provisions of endpoints for Vue.js on the frontend.

要加入聊天会话，用户将必须在注册过程中提供唯一的username和password作为凭据，然后，还将在CometChat上创建该用户。 这意味着在应用程序中注册新用户时，这些用户的详细信息将首先保存在本地数据库中，然后使用其REST API发送到CometChat服务器。 Laravel将用于构建这些流程所需的后端API，并在前端为Vue.js设置端点。

If you would love to try out the working demo for this tutorial, you can download the complete source code here on GitHub.

如果您想尝试本教程的工作演示，可以在GitHub上下载完整的源代码。

先决条件 ( Prerequisites )

Before proceeding, this tutorial assumes you have:

在继续之前，本教程假定您具有：

• A PHP development environment setup.
  PHP开发环境设置。
• Git installed on your computer. Follow this link to download Git if otherwise
  安装在计算机上的Git。 否则，请点击此链接下载Git
• A global installation of composer, which will be used to install all dependencies for the project.
  • Note: Homebrew users can install composer by running brew install composer##
  全局安装composer ，它将用于安装项目的所有依赖项。
  • 注意：自制软件用户可以通过运行brew install composer ##来安装composer。

CometChat？ ( CometChat? )

CometChat is a developer platform that allows you to easily integrate chat features and building a realtime chat widget for a new or existing web and mobile application. It is a developer tool that makes implementing features such as;

CometChat是一个开发人员平台，可让您轻松集成聊天功能并为新的或现有的Web和移动应用程序构建实时聊天小部件。 它是一个开发人员工具，可实现以下功能：

• Group chat
  群聊
• One on One chat
  一对一聊天
• Typing indicators
  打字指标
• Read and delivered indicators
  阅读和交付指标
• and a whole lot more, easy to craft.
  还有很多，易于制作。

You can read more about CometChat here on Comet’s official website.

您可以在Comet的官方网站上了解有关CometChat的更多信息。

CometChat的身份验证流程 ( CometChat’s authentication flow )

It is compulsory that one must be authenticated as a user before you can make use of infrastructure made available by CometChat.

必须强制经过身份验证的用户才能使用CometChat提供的基础结构。

As proof of concept or to test a demo application, you can make use of the sample users that are being generated automatically for every new application created on CometChat. But for a production-ready application, it is advisable to take it a step further by making use of our REST API to programmatically create unique users, as you would see later in the tutorial.

作为概念验证或测试演示应用程序，您可以利用为CometChat上创建的每个新应用程序自动生成的样本用户。 但是对于可用于生产环境的应用程序，建议您进一步使用REST API，以编程方式创建唯一用户，这将使您走得更远，就像您将在本教程的后面看到的那样。

Once a user is in place, authenticating such a user to CometChat, is as simple as calling the CometChat.login() the method from the JavaScript SDK. Before this method can work properly, you can either use the user’s UID and the auth-only secret key as a parameter for the CometChat.login() , or you can generate a unique auth token on CometChat via its REST API and use the generated token as they require a parameter.

一旦用户就位，对此类用户进行CometChat身份验证就像从JavaScript SDK调用CometChat.login()方法一样简单。 在此方法正常工作之前，您可以将用户的UID和仅身份验证密钥用作CometChat.login()的参数，也可以通过CometChat的REST API生成唯一的身份验证令牌，然后使用生成的令牌，因为它们需要参数。

For the purpose of this tutorial, you will learn how to use the auth token for authenticating a user.

就本教程而言，您将学习如何使用auth令牌来认证用户。

使用Laravel创建身份验证服务器 ( Creating an authentication server using Laravel )

While CometChat can handle the login process of users from your application, It is important to note that CometChat SDK can only maintain the session of the logged-in user within the SDK and will not be able to handle user authentication for your application. So here, you will build an authentication server using Laravel.

尽管CometChat可以处理您应用程序中用户的登录过程，但需要注意的是CometChat SDK只能维护SDK中已登录用户的会话，而不能处理应用程序的用户身份验证。 因此，在这里，您将使用Laravel构建身份验证服务器。

设置Laravel应用程序 ( Setting up the Laravel application )

The get started easily, you are going to set up a group chat application on top of a Laravel 5.8 application on GitHub. This starter template already contains the required assets, stylesheet, and a couple of dependencies for the app.

轻松入门，您将在GitHub上的Laravel 5.8应用程序之上设置一个群聊应用程序。 该入门模板已经包含所需的资产，样式表以及该应用程序的几个依赖项。

You will be making use of Git to clone this repository and gradually add more code to make it fully functional.

您将利用Git克隆此存储库，并逐步添加更多代码以使其完全起作用。

To begin, from the terminal in your machine, navigate to your preferred project directory and run the following command to clone the starter template from GitHub:

首先，从您机器上的终端，导航到您的首选项目目录，然后运行以下命令从GitHub克隆入门模板：

// Clone repositorygit clone https://github.com/christiannwamba/lara-chat-app-starter.git

Next, move into the newly created project:

接下来，进入新创建的项目：

cd lara-chat-app-starter

and install all the dependencies for Laravel using composer by running the following command:

并通过运行以下命令使用composer安装Laravel的所有依赖项：

composerinstall

Now, create a .env file and then copy the content of .env.example into it:

现在，创建一个.env文件，然后将.env.example的内容复制到其中：

// create a .envfile
touch .env

// update its content
cp .env.example .env

Generate a key for your project using the artisan command:

使用artisan命令为您的项目生成密钥：

php artisan key:generate

Once you are done, the next step is to create a connection to your database. To achieve that, open the .env file and update the DB_DATABASE, DB_USERNAME and DB_PASSWORD values with the appropriate contents.

完成后，下一步就是创建与数据库的连接。 为此，请打开.env文件，并使用适当的内容更新DB_DATABASE ， DB_USERNAME和DB_PASSWORD值。

💡 To avoid running into any error, ensure that you have created a database before running the next command.

💡为了避免遇到任何错误，请确保在运行下一个命令之前已创建数据库。

After successfully completing this basic setup, you can now proceed to generate the database structure for your application using the following command:

成功完成此基本设置之后，您现在可以使用以下命令继续为您的应用程序生成数据库结构：

php artisan migrate

The preceding command will run the migration file located in database/migrations/ with a file name that looks like this 2014_10_12_000000_create_users_table.php`` and create aUsers\ table with the appropriate fields.

前面的命令将运行位于database/migrations/的迁移文件，其文件名如下所示： 2014_10_12_000000 _create_users_table.php``并使用适当的字段创建Users\表。

创建路线 ( Creating routes )

In chronological order, what you want to achieve with the backend of this application is to create endpoints with the purpose of handling three different functionalities:

按照时间顺序，您希望使用此应用程序的后端实现的目的是创建端点，以处理三种不同的功能：

• Registering a user
  注册用户
• Logging in user into your application
  将用户登录到您的应用程序
• Saving a unique auth token for each user.
  为每个用户保存一个唯一的身份验证令牌。

Since the intention is to build the backend as an API that will be consumed by Vue.js (Frontend), it is absolutely fine to make use of the routes specifically created for that purpose by Laravel. First, open the routes/web.php file and ensure that the content in it is the same as what you have below. Otherwise, update its content with:

由于目的是将后端构建为Vue.js（Frontend）将使用的API，因此绝对可以使用Laravel为此目的专门创建的路由。 首先，打开routes/web.php文件，并确保其中的内容与下面的内容相同。 否则，请使用以下命令更新其内容：

// routes/web.php

Route::get('/{any}', function () {
     
    return view('layouts.master');
})->where('any','.*');

The code snippet above was used to register a route that can respond to all HTTP verbs. This is ideal for this application as all the routing will be handled by Vue.js, and Laravel will only render a single master layout view named layouts.master. You will create this file in a bit. Next, in routes/api.php, add the following routes to the list:

上面的代码段用于注册可以响应所有HTTP动词的路由。 这对于该应用程序是理想的，因为所有路由都将由Vue.js处理，并且Laravel将仅呈现一个名为layouts.master主布局视图。 您将稍后创建此文件。 接下来，在routes/api.php ，将以下路由添加到列表中：

// routes/web.php
Route::post('/register', 'UserController@register')->middleware('guest');
Route::post('/login', 'UserController@login')->middleware('guest');
Route::post('/update/token', 'UserController@updateToken');