laravel事件在real chat应用程序中生成错误

我正在制作一个即时聊天的演示，我能够显示登录用户的数量并在“在线用户”列表中显示他们的姓名，但问题是我创建了一个laravel事件来实时显示消息，在我的控制台中，我得到了以下错误消息：错误：语法错误，无法识别的表达式：#user=1

演示应用程序详细信息：

require('./bootstrap');


import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});



// online users :
let onlineUsersLength = 0;

window.Echo.join('online')
    .here((users) => {

        onlineUsersLength = users.length; 
        console.log(onlineUsersLength);

        let userId = $('meta[name=user-id]').attr('content');
        //console.log(userId);


        users.forEach(function(user){

            if (user.id == userId) { return; }
            $('#no-online-users').css('display','none');
            $('#online-users').append('<li id="user='+user.id+'" class="liste-group-item">'+user.name+'</li>');

        })
        //console.log(users);
    })

    .joining((user) => {
        $('#no-online-users').css('display','none');
        $('#online-users').append('<li id="user='+user.id+'" class="liste-group-item">'+user.name+'</li>');
    })

    .leaving((user) => {
        $('#user='+user.id).css('display','none');
        $('#no-online-users').css('display','yes');
    });


// submit chat text :
$('#chat-text').keypress(function(e){
    //console.log(e.which);
    if(e.which == 13){
        e.preventDefault();
        let body = $(this).val();
        let url = $(this).data('url');
        let data = {
            '_token': $('meta[name=csrf-token]').attr('content'),
             body
        }
        //console.log(body);

        $.ajax({
          url: url,
          method: 'post',
          data: data,
        });
    }
});



window.Echo.channel('chat-group')
    .listen('MessageDelivered', (e) => {
        console.log('message');
    });

拉雷维尔：5.8* php:^7.1.3 redis&laravel echo&laravel echo服务器

查看：

<div class="container">
    <div class="row">

        <div class="col-md-4">
            <h2>Online Users</h2>
            <hr>
            <h5 id="no-online-users">No Online Users</h5>

            <ul class="liste-group" id="online-users">

            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9 d-flex flex-column" style="height: 80vh">
            <div class="h-100 bg-white mb-4 p-5" id="chat" style="overflow-y: scroll;">

                @foreach($messages as $message)

                     @if(\Auth::user()->id == $message->user_id)
                       <div class="mt-4 w-50 text-white p-3 rounded float-right bg-primary">
                     @else
                       <div class="mt-4 w-50 text-black p-3 rounded float-left bg-warning">
                     @endif

                           <p>{{ $message->body }}</p>
                        </div>

                  <div class="clearfix"></div>
                @endforeach

            </div>


            <form action="" class="d-flex">
                <input type="text" id="chat-text" name="" data-url="{{ route('messages.store') }}" style="margin-right: 10px" class="col-md-9 d-flex flex-column">
                <button class="btn btn-primary col-md-3">Send</button>
            </form>
        </div>  
    </div>

</div>

namespace App\Http\Controllers;
use App\Message;
use Illuminate\Http\Request;

class MessageController extends Controller
{

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
    //index 
    public function index()
    {
        $messages = Message::all();
        return view('messages.index',compact('messages'));
    }

    // store 
    public function store(Request $request)
    {
        //$message = auth()->user()->messages()->create($request->all());
        //return $request->body;

         $message = new Message();
         $message->user_id = \Auth::user()->id;
         $message->body = $request->body;
         $message->save(); 

         broadcast(new MessageDelivered($message))->toOthers();
    }
}

namespace App\Events;

use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageDelivered implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat-group');
    }
}

事件消息已传递：

<div class="container">
    <div class="row">

        <div class="col-md-4">
            <h2>Online Users</h2>
            <hr>
            <h5 id="no-online-users">No Online Users</h5>

            <ul class="liste-group" id="online-users">

            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9 d-flex flex-column" style="height: 80vh">
            <div class="h-100 bg-white mb-4 p-5" id="chat" style="overflow-y: scroll;">

                @foreach($messages as $message)

                     @if(\Auth::user()->id == $message->user_id)
                       <div class="mt-4 w-50 text-white p-3 rounded float-right bg-primary">
                     @else
                       <div class="mt-4 w-50 text-black p-3 rounded float-left bg-warning">
                     @endif

                           <p>{{ $message->body }}</p>
                        </div>

                  <div class="clearfix"></div>
                @endforeach

            </div>


            <form action="" class="d-flex">
                <input type="text" id="chat-text" name="" data-url="{{ route('messages.store') }}" style="margin-right: 10px" class="col-md-9 d-flex flex-column">
                <button class="btn btn-primary col-md-3">Send</button>
            </form>
        </div>  
    </div>

</div>

namespace App\Http\Controllers;
use App\Message;
use Illuminate\Http\Request;

class MessageController extends Controller
{

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
    //index 
    public function index()
    {
        $messages = Message::all();
        return view('messages.index',compact('messages'));
    }

    // store 
    public function store(Request $request)
    {
        //$message = auth()->user()->messages()->create($request->all());
        //return $request->body;

         $message = new Message();
         $message->user_id = \Auth::user()->id;
         $message->body = $request->body;
         $message->save(); 

         broadcast(new MessageDelivered($message))->toOthers();
    }
}

namespace App\Events;

use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageDelivered implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat-group');
    }
}

app.js

require('./bootstrap');


import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});



// online users :
let onlineUsersLength = 0;

window.Echo.join('online')
    .here((users) => {

        onlineUsersLength = users.length; 
        console.log(onlineUsersLength);

        let userId = $('meta[name=user-id]').attr('content');
        //console.log(userId);


        users.forEach(function(user){

            if (user.id == userId) { return; }
            $('#no-online-users').css('display','none');
            $('#online-users').append('<li id="user='+user.id+'" class="liste-group-item">'+user.name+'</li>');

        })
        //console.log(users);
    })

    .joining((user) => {
        $('#no-online-users').css('display','none');
        $('#online-users').append('<li id="user='+user.id+'" class="liste-group-item">'+user.name+'</li>');
    })

    .leaving((user) => {
        $('#user='+user.id).css('display','none');
        $('#no-online-users').css('display','yes');
    });


// submit chat text :
$('#chat-text').keypress(function(e){
    //console.log(e.which);
    if(e.which == 13){
        e.preventDefault();
        let body = $(this).val();
        let url = $(this).data('url');
        let data = {
            '_token': $('meta[name=csrf-token]').attr('content'),
             body
        }
        //console.log(body);

        $.ajax({
          url: url,
          method: 'post',
          data: data,
        });
    }
});



window.Echo.channel('chat-group')
    .listen('MessageDelivered', (e) => {
        console.log('message');
    });

require（'./bootstrap'）；
从“laravel Echo”导入回音
window.io=require（'socket.io客户端'）；
window.Echo=新的Echo({
广播员：“socket.io”，
主机：window.location.hostname+'：6001
});
//在线用户：
让onlineUsersLength=0；
window.Echo.join（'在线'）
.here（（用户）=>{
onlineUsersLength=users.length；
console.log（onlineUsersLength）；
让userId=$（'meta[name=userId]'）.attr（'content'）；
//console.log（userId）；
users.forEach（函数（用户）{
如果（user.id==userId）{return；}
$（“#无在线用户”）.css（'display'，'none'）；
$（“#在线用户”）.append（“
“+user.name+”
”）；
})
//console.log（用户）；
})
.加入（（用户）=>{
$（“#无在线用户”）.css（'display'，'none'）；
$（“#在线用户”）.append（“
“+user.name+”
”）；
})
.离开（（用户）=>{
$（'#user='+user.id）.css（'display'，'none'）；
$（“#无在线用户”）.css（'display'，'yes'）；
});
//提交聊天文本：
$（“#聊天文本”）。按键（功能（e）{
//console.log（e.which）；
如果（e.which==13）{
e、 预防默认值（）；
让body=$（this.val（）；
设url=$（this.data（'url'）；
让数据={
“_token”：$（'meta[name=csrf token]”）。attr（'content'），
身体
}
//控制台日志（主体）；
$.ajax({
url:url，
方法：“post”，
数据：数据，
});
}
});
window.Echo.channel（'chat-group'）
.listen（'MessageDelivered'，（e）=>{
console.log（'message'）；
});

问题：

<div class="container">
    <div class="row">

        <div class="col-md-4">
            <h2>Online Users</h2>
            <hr>
            <h5 id="no-online-users">No Online Users</h5>

            <ul class="liste-group" id="online-users">

            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-9 d-flex flex-column" style="height: 80vh">
            <div class="h-100 bg-white mb-4 p-5" id="chat" style="overflow-y: scroll;">

                @foreach($messages as $message)

                     @if(\Auth::user()->id == $message->user_id)
                       <div class="mt-4 w-50 text-white p-3 rounded float-right bg-primary">
                     @else
                       <div class="mt-4 w-50 text-black p-3 rounded float-left bg-warning">
                     @endif

                           <p>{{ $message->body }}</p>
                        </div>

                  <div class="clearfix"></div>
                @endforeach

            </div>


            <form action="" class="d-flex">
                <input type="text" id="chat-text" name="" data-url="{{ route('messages.store') }}" style="margin-right: 10px" class="col-md-9 d-flex flex-column">
                <button class="btn btn-primary col-md-3">Send</button>
            </form>
        </div>  
    </div>

</div>

namespace App\Http\Controllers;
use App\Message;
use Illuminate\Http\Request;

class MessageController extends Controller
{

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
    //index 
    public function index()
    {
        $messages = Message::all();
        return view('messages.index',compact('messages'));
    }

    // store 
    public function store(Request $request)
    {
        //$message = auth()->user()->messages()->create($request->all());
        //return $request->body;

         $message = new Message();
         $message->user_id = \Auth::user()->id;
         $message->body = $request->body;
         $message->save(); 

         broadcast(new MessageDelivered($message))->toOthers();
    }
}

namespace App\Events;

use App\Message;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MessageDelivered implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat-group');
    }
}

在第一个用户控制台中（数据库中的用户id 1）

在第二个用户控制台中（数据库中的用户id 2）

---

当我为特定用户刷新页面时，第二个用户出现错误

我猜您在这里输入了错误$（'#user='+user.id）.css（'display'，'none'）

这里是

$（'#online users'）.append（'li id=“user='+user.id+'”class=“liste group item”>'+user.name+”）^^^

你可以把它修好

//...
users.forEach(function(user){

            if (user.id == userId) { return; }
            $('#no-online-users').css('display','none');
            $('#online-users').append('<li id="user-'+user.id+'" class="liste-group-item">'+user.name+'</li>');

})

//...
.joining((user) => {
        $('#no-online-users').css('display','none');
        $('#online-users').append('<li id="user='+user.id+'" class="liste-group-item">'+user.name+'</li>');
})
.leaving((user) => {
            $('#user-'+user.id).css('display','none');
            $('#no-online-users').css('display','yes');
});
//...

/。。。
users.forEach（函数（用户）{
如果（user.id==userId）{return；}
$（“#无在线用户”）.css（'display'，'none'）；
$（“#在线用户”）.append（“
“+user.name+”
”）；
})
//...
.加入（（用户）=>{
$（“#无在线用户”）.css（'display'，'none'）；
$（“#在线用户”）.append（“
“+user.name+”
”）；
})
.离开（（用户）=>{
$（'#user-'+user.id）.css（'display'，'none'）；
$（“#无在线用户”）.css（'display'，'yes'）；
});
//...