在本教程中,无涯教程将向您展示如何在Laravel 5中使用socket.io,Redis,Expressjs和NodeJS制作实时聊天消息模块。通过无涯教程可以在Laravel 5应用程序中创建实时聊天模块,无涯教程从头开始向您展示,因为您可以安装nodejs及其软件包等。在本文中,您可以了解并逐步了解如何编写代码,并逐步学习。您必须遵循该步骤并在您的应用程序中实现实时聊天模块。因此,基本上您可以看到无涯教程的聊天消息模块的以下预览。
预览:
步骤1:安装nodejs
在第一步中,如果无涯教程之前没有安装,无涯教程将安装nodejs。因此,请确保检查nodejs是否未安装,然后您可以轻松启用以下命令并安装nodejs。
sudo apt-get update
sudo apt-get install nodejs
步骤2:安装npm
无涯教程必须需要安装NPM,因为无涯教程将使用NPM命令安装更多Socket.io,Redis和Express Package,因此如果在下面的命令之前未安装此命令。
sudo apt-get install npm
步骤3:安装redis-server
无涯教程还要求安装redis服务器,因为无涯教程将管理redis令牌,因此如果在下面的命令之前未安装此命令,则安装此命令。
sudo apt-get install redis-server
步骤4:安装Express redis socket.io
无涯教程还需要安装Redis Express Redis Socket.io,因此如果您在遵循以下命令之前未在安装之前安装此命令。
npm install express redis socket.io --save
步骤5:安装Laravel
好的,现在无涯教程已准备好安装Laravel 5应用程序。
composer create-project --prefer-dist laravel/laravel blog
步骤6:创建server.js文件
现在,打开Laravel应用程序根目录和创建文件夹 nodejs 并在nodejs文件夹中创建新的文件server.js。
nodejs/server.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var redis = require('redis');
server.listen(8890);
io.on('connection', function (socket) {
console.log("client connected");
var redisClient = redis.createClient();
redisClient.subscribe('message');
redisClient.on("message", function(channel, data) {
console.log("mew message add in queue "+ data['message'] + " channel");
socket.emit(channel, data);
});
socket.on('disconnect', function() {
redisClient.quit();
});
});
步骤7:安装predis包
在此步骤中,无涯教程必须安装Prestavel。通过无涯教程可以通过无涯教程在Redis中分配消息。
sudo composer require predis/predis
现在无涯教程必须添加别名包的别名,所以打开 config/app.php 并替换以下行:
'Redis' => Illuminate\Support\Facades\Redis::class,
替换为
'LRedis' => 'Illuminate\Support\Facades\Redis'
步骤8:添加Auth和Controller
无涯教程必须为此真正的聊天系统需要身份验证模块,因为没有登录使用,无涯教程无法互相聊天,所以执行下面命令。
php artisan make:auth
你可以这样看看你的终端:
Created View: /var/www/laravel5/resources/views/auth/login.blade.php
Created View: /var/www/laravel5/resources/views/auth/register.blade.php
Created View: /var/www/laravel5/resources/views/auth/passwords/email.blade.php
Created View: /var/www/laravel5/resources/views/auth/passwords/reset.blade.php
Created View: /var/www/laravel5/resources/views/auth/emails/password.blade.php
Created View: /var/www/laravel5/resources/views/layouts/app.blade.php
Created View: /var/www/laravel5/resources/views/home.blade.php
Created View: /var/www/laravel5/resources/views/welcome.blade.php
Installed HomeController.
Updated Routes File.
Authentication scaffolding generated successfully!
好的,现在无涯教程可以创建用户表的方式运行迁移:
php artisan migrate
无涯教程还需要创建新的ChatController控制器,在控制台执行下面的命令。
php artisan make:controller chatController
将代码放在该控制器中。
app/Http/Controllers/chatController
namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Request;
use LRedis;
class chatController extends Controller {
public function __construct()
{
$this->middleware('guest');
}
public function sendMessage(){
$redis = LRedis::connection();
$data = ['message' => Request::input('message'), 'user' => Request::input('user')];
$redis->publish('message', json_encode($data));
return response()->json([]);
}
}
步骤9:添加路由和消息布局
在最后一步中,无涯教程需要遵循路由,因此打开Routes.php文件并添加以下路由。
Route::group(['middleware' => 'web'], function () {
Route::auth();
Route::get('/home', '[email protected]');
});
Route::post('sendmessage', '[email protected]');
接下来,无涯教程必须替换resources/views/home.blade.php文件。因此,请复制下面的代码,并将其放入此文件中:
resources/views/home.blade.php
@extends('layouts.app')
@section('content')
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<style type="text/css">
#messages{
border: 1px solid black;
height: 300px;
margin-bottom: 8px;
overflow: scroll;
padding: 5px;
}
</style>
<div class="container spark-screen">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Chat Message Module</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-8" >
<div id="messages" ></div>
</div>
<div class="col-lg-8" >
<form action="sendmessage" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}" >
<input type="hidden" name="user" value="{{ Auth::user()->name }}" >
<pre class="form-control msg"></pre>
<br/>
<input type="button" value="Send" class="btn btn-success send-msg">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var socket = io.connect('http://localhost:8890');
socket.on('message', function (data) {
data = jQuery.parseJSON(data);
console.log(data.user);
$( "#messages" ).append( "<strong>"+data.user+":</strong><p>"+data.message+"</p>" );
});
$(".send-msg").click(function(e){
e.preventDefault();
var token = $("input[name='_token']").val();
var user = $("input[name='user']").val();
var msg = $(".msg").val();
if(msg != ''){
$.ajax({
type: "POST",
url: '{!! URL::to("sendmessage") !!}',
dataType: "json",
data: {'_token':token,'message':msg,'user':user},
success:function(data){
console.log(data);
$(".msg").val('');
}
});
}else{
alert("Please Add Message.");
}
})
</script>
@endsection
好的,最后无涯教程已准备好运行此脚本,所以首先打开终端并继续NodeJS目录,然后触及命令。
node server.js
现在在浏览器上运行应用程序并运行。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)