Building a Live Online Chat Room Based on Laravel + Swoole + Vue (P4): Front-end Resource Initialization
As said at the beginning , the front-end interface of this practical tutorial will be based on the chat room project implemented by the front-end technology stack https://github.com/hua1995116/webchat in order to focus on the development of chat room functions based on Swoole for the convenience of introduction, it will be called Vue-Webchat.
However, Vue-Webchat’s front and back ends are implemented based on JavaScript. The front end uses the Vue framework, the back end uses the Express framework, the database uses MongoDB , and the front and back ends of WebSocket communication are based on Socket.io. In the project, we want to use the Laravel framework as the backend to store data in the MySQL database, and the WebSocket server is implemented based on Swoole. In addition, we also want to use Laravel Mix provided by Laravel as a front-end resource compilation tool to replace the native Webpack, so the original front-end code must be appropriately modified.
Front-end code for this project has been submitted to the Github repository: https://github.com/nonfu/webchat.
In the Vue-Webchat this project, located in the front-end source code src
directory:
Let’s delete project Laravel webchat
of resources/js
all files in a directory, then the Vue-Webchat of src
directory migrated:
Here I make the adjustment on the part of the directory structure, such as the original project static/css/reset.css
moved to resources/css/reset.css
, the original project src/styles
style under the code integrated into resources/sass/app.scss
in order to better fit Laravel project directory structure. In addition, I will be the original project src
directory App.vue
and BaseTransition.vue
files to the resources/js/layout
directory, the original project src
directory under the view
subdirectory rename pages, this is just personal preference, of course, the corresponding need to modify all of the introduction of the file path.
Further, a front end JavaScript file entry main.js
for renaming app.js
.
The front-end view entry file of the original project is located in the root directory, index.html
and the view entry file of this project is located at resources/views/index.blade.php
:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<title>Laravel学院在线聊天室</title>
<script type='text/javascript'>
window.Laravel = <?php echo json_encode(['csrfToken' => csrf_token(),]); ?>
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Accordingly, the need to routes/web.php
route the file to adjust the default home page view template:
Route::get('/', function () {
return view('index');
});
Next, let’s focus on the modifications made to the front-end code to fit the Laravel back-end framework and the Swoole WebSocket server.
Interaction with back-end interfaces are packaged in a unified resources/js/api
directory, in axios.js
the base package provides a library of Axios, and all back-end interface calls are located in server.js
, where we need to axios.js
be adjusted, adding CSRF Token request header:
import axios from 'axios';
const baseURL = '/api/';
const instance = axios.create();
instance.defaults.timeout = 30000; // 30s timeout on all interfaces
instance.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// CSRF Token for all request headers
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
instance.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
...
The routing and processing logic that specifically calls the back-end interface is ignored first, and then debug one by one when developing specific functions later.
Vue-Webchat project-based socket.io-client
libraries to communicate as a client and WebSocket server, where we follow the client program, but the need to modify the connection configuration, back-end configuration changes to Swoole WebSocket server, modify the resources/js/socket.js
code as follows:
// WebSocket request via Socket.io client
import io from 'socket.io-client'
const socket = io.connect(process.env.APP_URL + ':' + process.env.LARAVELS_LISTEN_PORT + '/ws/')
export default socket
And axios
as specific call this socket
module where the first matter, the development of specific functions to back one by one when debugging.
Vue-Webchat item view upon introduction assembly and the module configuration @
path alias, such that:
import {queryString} from '@utils/queryString';
This project canceled this configuration and was introduced directly through relative paths:
import {queryString} from './utils/queryString';
All involve @
local path references should be adjusted, mainly in the pages
Vue components under a subdirectory.
As mentioned earlier, JavaScript files of this project is the entrance app.js
, CSS resource file in my original project introduced here out of all, integrated into the webpack.mix.js
lower compiled by Laravel Mix:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles([
'resources/css/reset.css',
'public/css/app.css',
'node_modules/muse-ui/dist/muse-ui.css'
], 'public/css/app.css');
Next, we add the front-end code involved in all new dependencies to the project under the root directory package.json
in which:
"devDependencies": {
"axios": "^0.18",
"cross-env": "^5.1",
"file-loader": "^4.2.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"muse-ui": "^3.0.2",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.23.1",
"sass-loader": "7.*",
"socket.io-client": "^2.3.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"timers": "^0.1.1",
"url-loader": "^2.2.0",
"vivus": "^0.4.5",
"vue": "^2.6.10",
"vue-cropper": "^0.4.9",
"vue-picture-preview": "^1.3.0",
"vue-router": "^3.1.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"vuex": "^3.1.1",
"xss-filters-es6": "^1.0.0"
}
And then run the npm install
install all front-end dependent libraries.
Of course, all the above front-end code migrations and adjustments have been submitted to the Github repository, you can download the corresponding resources directly to the local here: https://github.com/nonfu/webchat.
Finally, in the root directory of the project npm run dev
to compile all of these resources through the front Laravel Mix:
After the compilation is successful, next, we will start debugging the interaction between the front-end interface and the back-end interface, which will be explained in subsequent tutorials.
#laravel #vue #swoole