Laravel websockets 聊天系统

Question

您好，我正在尝试构建一个 laravel 实时聊天。我配置了 websockets，它似乎正在连接，但现在我试图发送一条消息不起作用。我正在关注 youtube 中的教程，并按照教程中的方式进行了所有操作，但我不知道为什么会收到此错误。如果你能看一下，我将不胜感激。

我收到的错误

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
app.js:38405 [Vue warn]: Property or method "sendMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Chats> at resources/js/components/ChatsComponent.vue
       <Root>
warn @ app.js:38405
warnNonPresent @ app.js:39818
get @ app.js:39873
keyup @ app.js:37616
invokeWithErrorHandling @ app.js:39634
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:38405 [Vue warn]: Error in v-on handler: "TypeError: _vm.sendMessage is not a function"

found in

---> <Chats> at resources/js/components/ChatsComponent.vue
       <Root>
warn @ app.js:38405
logError @ app.js:39664
globalHandleError @ app.js:39659
handleError @ app.js:39619
invokeWithErrorHandling @ app.js:39642
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:39668 TypeError: _vm.sendMessage is not a function
    at keyup (app.js:37616)
    at invokeWithErrorHandling (app.js:39634)
    at HTMLInputElement.invoker (app.js:39959)
    at HTMLInputElement.original._wrapper (app.js:45318)
logError @ app.js:39668
globalHandleError @ app.js:39659
handleError @ app.js:39619
invokeWithErrorHandling @ app.js:39642
invoker @ app.js:39959
original._wrapper @ app.js:45318
app.js:38405 [Vue warn]: Property or method "sendMessage" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我在用户类中创建了这个函数

 public function messages()
    {
        return $this->hasMany(Message::class);
    }

消息类

class Message extends Model
{
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $fillable = ['message'];
    public function user()
    {
        return $this->belognsTo(User::class);
    }
}

控制器

使用 Illuminate\Http\Request; 使用 App\Message;

class ChatsController extends Controller
{
    public function _construct(){
        $this->middleware('auth');
    }
    
    public function index()
    {
        return view('chats');
    }

    public function fetchMessages()
    {
        return Message::with('user')->get();
    }

    public function sendMessages(Request $request)
    {
       $message = auth()->user()->messages()->create([
            'message' => $request->message
        ]);

        return ['status' =>'success'];
    }
}

Vue 聊天组件

<template>
    <div class="row">
        <div class="col-8">
            <div class="card card-default">
                <div class="card-header">Messages</div>
                <div class="card-body p-0">
                    <ul class="list-unstyled" style="height:300px; overflow-y:scroll">
                        <li class="p-2" v-for="(message,index) in messages" :key="index">
                            <strong>{{ message.user.name }}</strong>
                            {{ message.message }}
                        </li>
                    </ul>
                </div>

                <input
                    @keyup.enter="sendMessage"
                    v-model="newMessage"
                    type="text" 
                    name="message" 
                    placeholder="Enter your message..."
                    class="form-control">
            </div>
             <span class="text-muted">User is typing...</span>
        </div>

        <div class="col-4">
            <div class="card card-default">
                <div class="card-header">Active Users</div>
                <div class="card-body">
                    <ul>
                        <li class="py-2">Harish</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {

        props:['user'],

        data(){
            return {
                messages:[],
                newMessage:'',
            }
        },

        created(){
           this.fetchMessages();
        },

        methods:{
            fetchMessages(){
              axios.get('messages').then(response =>{
                this.messages = response.data
                })                
            },

            sendMessages(){
                this.messages.push({
                    user:this.user,
                    message:this.newMessage
                });
                
                axios.post('messages', {message: this.newMessage});

                this.newMessage='';
            }
        }
    }
</script>

聊天视图

@extends('layouts.app')

@section('content')
<div class="container">
    <chats :user="{{ auth()->user()}}"></chats>
</div>
@endsection

路线

Route::get('/chats','ChatsController@index')->middleware('auth');
Route::get('/messages','ChatsController@fetchMessages');
Route::post('/messages','ChatsController@sendMessages');

Answer 1

将 @keyup.enter="sendMessage" 更改为 @keyup.enter="sendMessages"

s 这里不见了

这就是你收到Property or method "sendMessage" is not defined的原因