Socket.IO - Laravel 聊天

Socket.IO - Laravel 聊天 首页 / Socket.io入门教程 / Socket.IO - Laravel 聊天

在本教程中,无涯教程将向您展示如何在Laravel 5中使用socket.io,Redis,ExpressjsNodeJS制作实时聊天消息模块。通过无涯教程可以在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

现在在浏览器上运行应用程序并运行。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

数据分析实战45讲 -〔陈旸〕

Flutter核心技术与实战 -〔陈航〕

现代C++编程实战 -〔吴咏炜〕

深入浅出云计算 -〔何恺铎〕

跟着高手学复盘 -〔张鹏〕

如何落地业务建模 -〔徐昊〕

深入C语言和程序运行原理 -〔于航〕

大厂广告产品心法 -〔郭谊〕

React Native 新架构实战课 -〔蒋宏伟〕

好记忆不如烂笔头。留下您的足迹吧 :)