Aplikasi Laravel Vue Chat: Panduan Lengkap – Codewithaden

Aplikasi obrolan adalah umum saat ini karena Pandemi telah mengganggu kehidupan di seluruh dunia. Tutorial ini akan membangun aplikasi obrolan real-time menggunakan Laravel dan Vue.Js.

Aplikasi Laravel Vue Obrolan

Untuk membuat aplikasi obrolan di Laravel dengan Vue.js , menggunakan Pusher layanan pesan waktu nyata, dan di sisi klien, gunakan Laravel Gema dan Pusher.js perpustakaan untuk memperbarui kami Ui secara real-time.

Selain itu, kami akan belajar bagaimana Laravel menyiarkan suatu acara, dan Vue.js mendengarkan acara itu dan memperbarui komponen VUE secara real-time. Tutorial ini sedikit besar, jadi silakan periksa GitHub tautan untuk proyek ini.

Membintangi proyek dengan menginstal segar Laravel

Langkah 1: Pasang Laravel.

Ketik perintah berikut.

laravel new chat

# or

composer create-project laravel/laravel chat --prefer-dist 

Masuk ke folder proyek.

cd chat 

Instal semua dependensi frontend menggunakan perintah berikut.

npm install 

Buka proyek di editor favorit Anda. Punyaku adalah vscode.

code . 

Konfigurasikan database di dalam .env mengajukan.

Sekarang, buat perancah auth yang disediakan oleh Laravel.

php artisan make:auth 

Sekarang, buka terminal dan buat tabel dari migrasi.

php artisan migrate 

Sekarang, daftarkan pengguna di http: //chat.test/register atau http://localhost:8000/register.

Langkah 2: Buat model dan migrasi.

Kita perlu membuat file Pesan model dan migrasi karena menyimpan Pengguna pesan.

Jadi, buka terminal dan hasilkan model dan migrasi menggunakan perintah berikut.

php artisan make:model Message -m 

Selanjutnya, buka file migrasi dan tambahkan skema.

// create_messages_table

public function up()
{
        Schema::create('messages', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->unsigned();
            $table->text('body');
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
} 

Migrasi skema ke database.

php artisan migrate 

Langkah 3: Tentukan hubungan model.

Kami memiliki dua model.

  1. Pengguna
  2. Pesan

Pengguna memiliki banyak Pesan.

Pesan Milik Pengguna.

Jadi, tulis hubungan di dalam User.php mengajukan.

// User.php

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

Hubungan terbalik yang sama didefinisikan dalam Pesan.php mengajukan.

// Message.php

public function user()
{
   return $this->belongsTo(User::class);
} 

Juga, tentukan bidang yang dapat diisi di dalam Pesan.php bidang untuk mencegah pengecualian penugasan massal.

// Message.php

protected $fillable = ['body']; 

Kita juga perlu menambahkan satu bidang lagi yang dipanggil diri sendiri. Bidang ini memberi tahu kita apakah pesan itu milik kita.

// Message.php

protected $appends = ['selfMessage']; 

Tentukan fungsi yang memberi tahu pengguna apakah pengguna masuk atau pengguna lain memiliki pesan. Kita perlu membedakan karena berdasarkan swasfessage Atribut, kami dapat menetapkan kelas CSS yang berbeda ke pesan pengguna.

// Message.php

public function getSelfMessageAttribute()
{
    return $this->user_id === auth()->user()->id;
} 

Jadi, keseluruhan kami Pesan.php File model terlihat seperti ini.

// Message.php

user_id === auth()->user()->id;
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}
 

Langkah 4: Buat rute dan pengontrol.

Buat file pengontrol yang dipanggil Chatcontroller.php.

php artisan make:controller ChatController 

Tentukan indeks() berfungsi di dalamnya.

// ChatController.php

middleware('auth');
    }

    public function index()
    {
        return view('chat');
    }
}
 

Membuat chat.blade.php file di dalam pandangan map. Tulis kode berikut di dalam chat.blade.php mengajukan.


@extends('layouts.app')

@section('content')
Chats
Chats
Users
Users
@endsection

Tentukan rute. Jadi tulis baris berikut di dalam a web.php mengajukan.

// web.php

Route::get('/chat', 'ChatController@index')->name('chat');
 

Pergi ke URL ini: http: //chat.test/chat atau http: // localhost: 8000/chat

Laravel

Langkah 5: Buat komponen VUE.

Oke, jadi ke terminal dan tekan perintah berikut.

npm run watch 

Jadi, ketika kita menulis file vue, secara otomatis dikompilasi dan dimasukkan ke dalam Publik >> JS map.

Dalam aset >> js >> komponen folder, ganti nama ExampleComponent.vue file ke Chatcomponent.vue. Juga, perubahan dalam app.js file di dalam Aset >> JS map.

// app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('chat-component', require('./components/ChatComponent.vue'));

const app = new Vue({
    el: '#app'
});
 

Simpan file, dan Anda dapat melihat pemberitahuan yang mengatakan bahwa Kompilasi campuran Laravel berhasil.

Oke, sekarang tulis kode berikut di dalam Chatcomponent.vue mengajukan.




 

Juga, buat a UserComponent.vue di dalam komponen map.




 

Terakhir, tambahkan komponen ini di dalam obrolan >> index.blade.php mengajukan.

@extends('layouts.app')

@section('content')
@endsection

Sekarang, kita dapat memecah komponen lebih lanjut.

Dalam Chatcomponent.vue File, kita dapat memecahnya menjadi dua komponen.

  1. CHATMESSAGESC Component
  2. CHATFORFORMPONENT

Jadi, buat komponen vue di dalam folder komponen yang disebut ChatmessageComponent.vue mengajukan.

// ChatMessagesComponent.vue




 

Juga, kita perlu membuat formulir di mana pengguna dapat mengetik pesan dan mengirimkannya ke pengguna lain.

Jadi, buat komponen vue di dalam folder komponen yang disebut ChatFormComponent.vue mengajukan.

// ChatFormComponent.vue




 

Daftarkan kedua komponen di dalamnya aset >> js >> app.js mengajukan.

// app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('chat-component', require('./components/ChatComponent.vue'));
Vue.component('user-component', require('./components/UserComponent.vue'));
Vue.component('chat-messages-component', require('./components/ChatMessageComponent.vue'));
Vue.component('chat-form-component', require('./components/ChatFormComponent.vue'));

const app = new Vue({
    el: '#app'
});
 

Kami juga bisa rusak CHATMESSAGESC Component ke dalam komponen lebih lanjut yang disebut Komponen Message. Itu hanya menampilkan pesan. Jadi setiap pesan membuat komponen ini.

Jadi, buat bagian dalam komponen map.

// MessageComponent.vue




 

Daftarkan komponen ini di dalam sebuah app.js mengajukan.

// app.js

Vue.component('message-component', require('./components/MessageComponent.vue'));
 

Sekarang, perbarui ChatmessageComponent.vue mengajukan.

// ChatMessagesComponent.vue




 

Harap simpan file, dan output kami terlihat seperti ini.

Vue

Langkah 6: Buat formulir di dalam chatFormPonent.

Sekarang, tambahkan kode berikut di dalam ChatFormComponent.vue mengajukan.

// ChatFormComponent.vue





 

Kami juga telah menata komponen kami. Jadi output terlihat seperti gambar di bawah ini.

Laravel

Langkah 7: Gaya komponen message.

Jadi di dalam MessageComponent.vue File, tulis gaya berikut.

// MessageComponent.vue






 

Saya telah menulis pesan obrolan sampel untuk melihat seperti apa.

Vue

Sekarang, a diri sendiri Kelas adalah kelas bersyarat di mana kita perlu membedakan pesan dari pesan pengguna yang saat ini masuk ke pesan pengguna lain. Jadi kita perlu melakukannya secara dinamis.

Langkah 8: Gaya bagian Pengguna.

Dalam UserComponent.vue, Tambahkan kelas dan gaya. Saya menulis komponen ini dengan pengguna demo.

// UserComponent.vue






 

Langkah 9: Buat MessageController.

Membuat MessageController menggunakan perintah berikut.

php artisan make:controller MessageController 

Sekarang, tentukan rute di dalamnya a web.php mengajukan.

// web.php

Route::get('/message', 'MessageController@index')->name('message');
 

Dalam MessageController, Buat fungsi indeks yang mengembalikan objek JSON.

Objek JSON ini berisi semua pesan kami.

// MessageController.php

get();

        return response()->json($messages);
    }
}
 

Kami menggunakan rute yang ditentukan di atas untuk mengirim permintaan jaringan dari a Vue komponen melalui Axios API, dan kemudian sebagai tanggapan, kami mendapatkan semua pesan dan menampilkan pesan -pesan itu.

Langkah 10: Gunakan Axios untuk mengirim permintaan jaringan.

Oke, sekarang kita perlu mengkonfigurasi AXIOS untuk mengirim permintaan AJAX atau permintaan jaringan ke server Laravel, mengambil pesan, dan menampilkan pesan -pesan itu kepada pengguna.

Kami akan menulis kode permintaan Axios Get di dalam ChatmessageComponent.vue mengajukan.

// ChatMessageComponent.vue




 

Saat komponen dipasang, kami mengirim permintaan AJAX ke server, ambil respons dan tetapkan respons itu ke pesan Properti.

Sekarang, kita perlu menyampaikan pesan itu ke .

Komponen itu bertanggung jawab untuk menampilkan semua pesan.

Jadi, tulis kode berikut di dalam itu ChatmessageComponent.vue templat file.

// ChatMessageComponent.vue

 

Langkah 11: Tampilkan pesan.

Sekarang, kami melewati pesan properti ke MessageComponent.vue mengajukan.

// MessageComponent.vue



 

Saya belum menulis gaya, tetapi ada di sana.

Simpan file dan pergi ke http: //chat.test/chat atau http: // localhost: 8000/chat.

Kami tidak memiliki pesan dalam database, tetapi ketika kami memasukkannya ke dalam database, kami dapat melihat semua pesan di sini.

Langkah 12: Mengirim pesan.

Kami belum mengambil tombol kirim apa pun, sehingga pesan akan mengirimkan ke server ketika pengguna mengenai tombol Enter atau Return. Jadi untuk itu, kodenya adalah sebagai berikut.

Pertama, ketika kami mengirim pesan, kami perlu segera memperbarui antarmuka pengguna kami. Untuk itu, kami membutuhkan beberapa acara yang memberi tahu aplikasi Vue.js kami bahwa pesan baru telah tiba; Harap perbarui antarmuka pengguna.

Jadi, di dalam JS folder, buat satu file yang dipanggil Event.js. Tulis kode berikut.

// event.js

import Vue from 'vue';

export default new Vue(); 

Oke, sekarang kita perlu menambahkan pesan ke array pesan, tetapi kita membutuhkan pesan sementara dengan properti berikut.

  1. PENGENAL
  2. Badan Pesan
  3. Nama belakang

Jadi, ketika pengguna memukul ENTER, kita perlu membuat objek sementara dan meneruskan objek itu ke suatu peristiwa.

Dengarkan acara itu di komponen vue.js lain, dan itu adalah ChatMessageComponent.

Ambil objek yang telah kami lewati dengan suatu peristiwa dan tambahkan objek itu di dalam pesan Himpunan.

Setelah itu, Vue.js secara otomatis mendeteksi perubahan Komponen Message dan memperbarui antarmuka pengguna.

Alasan utama di balik menggunakan suatu peristiwa adalah bahwa kami memiliki data dalam satu Komponen vue.js, dan kita perlu meneruskan data ini ke yang lain Vue.js komponen.

Sekarang, saya menulis keseluruhan ChatFormComponent.vue mengajukan. Ini memancarkan peristiwa yang memiliki objek temp.

// ChatFormComponent.vue






 

Saya telah menggunakan nama pengguna di objek temp, tetapi dalam skenario nyata, ia memiliki nama pengguna yang saat ini masuk. Kami akan melakukan ini dalam satu menit untuk mendapatkan nama pengguna yang sebenarnya.

Oke, sekarang dengarkan acara ini di dalam Chatmessage.vue komponen.

// ChatMessageComponent.vue




 

Dalam Lihat >> tata letak >> app.blade.php File, tulis kode berikut di dalam bagian.

 

Jadi, yang telah kami lakukan adalah, jika pengguna masuk, maka kami mendapatkan nama pengguna dan menetapkannya ke variabel Laravel global.

Itu berarti sekarang kita dapat mengakses nama pengguna di dalam komponen Vue.js. Jadi ketika kami mengatur objek pesan sementara, kami dapat menetapkan properti nama ke properti nama pengguna Laravel, dan kami akhirnya dapat melihat nama pengguna yang saat ini masuk.

Sekarang, tulis kode ini di dalam ChatmessageComponent.vue mengajukan.

// ChatMessageComponent.vue






 

Juga ChatmessageComponent.vue File terlihat seperti ini.

// ChatMessageComponent.vue




 

Jadi, ketika pengguna yang saat ini masuk masuk pesan apa pun, scroller kembali ke atas.

Langkah 13: Simpan pesan di database.

Tentukan rute untuk menyimpan pesan.

// web.php

Route::post('/message', 'MessageController@store')->name('message.store');
 

Sekarang, kode fungsi toko untuk menyimpan data ke dalam database MySQL.

// MessageController.php

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

     return response()->json($message);
} 

Oke, di dalam ChatFormComponent.vue File, tulis kode untuk mengirim permintaan pos Axios ke rute web ini dan lulus badan sebagai parameter.

// ChatFormComponent.vue

sendMessage() {
        if(!this.body || this.body.trim() === '') {
               return
        }
           let messageObj = this.buildMessage();
           Event.$emit('added_message', messageObj);
            axios.post('/message', {
                body: this.body.trim()
            }).catch(() => {
                 console.log('failed');
            });
            this.body = null;
        }, 

Sekarang, simpan file dan buka URL ini: http: //chat.test/chat atau http://localhost:8000/chat.

Ketik satu pesan di area teks dan tekan Enter.

Anda dapat melihat pesan langsung ditampilkan, yang merupakan pesan sementara kami.

Sekarang, segarkan halaman dan lihat apakah pesan ini tetap ada atau tidak.

Jika bertahan, maka kami telah berhasil menyimpan pesan tersebut.

Langkah 14: Pusher Pengaturan: Layanan Pesan waktu-nyata.

Kami menggunakan layanan pendorong untuk pesan real-time.

Pertama, kita perlu mengubah driver siaran di dalam .env mengajukan.

// .env
BROADCAST_DRIVER=pusher
 

Langkah selanjutnya adalah melepaskan komentar di dalamnya config >> app.php file Array penyedia.

App\Providers\BroadcastServiceProvider::class, 

Langkah selanjutnya adalah membuat aplikasi pendorong.

Pergi ke URL ini: https://pusher.com/

Daftar untuk sebuah akun. Saya telah mendaftar menggunakan GitHub.

Sekarang, Anda akan mengarahkan kembali ke halaman ini: https://dashboard.pusher.com

Membuat aplikasi dan pergi ke Kunci aplikasi bagian. Juga, periksa cluster Anda.

Sekarang ambil semua data dan masukkan ke dalam .env mengajukan.

// .env

PUSHER_APP_ID=your app id
PUSHER_APP_KEY=your app key
PUSHER_APP_SECRET=your app secret
PUSHER_APP_CLUSTER=your cluster 

Sekarang, instal Pusher PHP-Server melalui komposer. Pergi ke terminal dan ketik perintah berikut.

composer require pusher/pusher-php-server 

Kami juga membutuhkan dependensi frontend berikut.

  1. Pusher.js
  2. Laravel Echo

Instal keduanya menggunakan perintah berikut.

npm install pusher-js laravel-echo  --save 

Sekarang, pergi ke Aset >> js >> bootstrap.js mengajukan.

Unkomment pada baris berikut. Secara default, dikomentari.

// bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
}); 

Sekarang, di dalam .env File, ada juga variabel seperti ini.

// .env

MIX_PUSHER_APP_KEY=your pusher key
MIX_PUSHER_APP_CLUSTER=your cluster 

Disini Mix_pusher_key , Anda menempatkan kunci publik Anda yang disediakan oleh pendorong, sama seperti Pusher_app_key.

Juga, tulis Mix_pusher_app_cluster ke nama cluster Anda.

Simpan file dan lihat konsol jika Anda tidak menghadapi kesalahan.

Langkah 15: Tampilkan pengguna online.

Pertama, di dalam rute >> channels.php file, tulis kode berikut.

// channels.php

 $user->id,
        'name' => $user->name
    ];
});
 

Jadi, kami telah mengatur saluran global yang mengembalikan objek pengguna.

Oke, sekarang ketika pengguna bergabung dalam obrolan, kami perlu memperbarui UI Vue.js kami.

Jadi, Vue.js Harus diberitahu ketika pengguna baru bergabung untuk mengobrol.

Idealnya, kita bisa melakukan itu menggunakan acara. Jadi, ketika pengguna baru bergabung, kami menyiarkan acara, dan kemudian frontend kami akan mendengarkan acara itu dan memperbarui antarmuka pengguna.

Dalam Sumber Daya >> Aset >> JS folder, buat satu file yang dipanggil Echo.js.

File ini mendengarkan semua acara penyiaran dan memberi tahu Vue.js untuk memperbarui antarmuka.

Tulis kode berikut di dalam Echo.js mengajukan.

// echo.js

Echo.join('chat')
    .here(users => {
        console.log(users);
    })
    .joining(user => {
        console.log(user);
    })
    .leaving(user => {
        console.log(user);
    }) 

Membutuhkan file ini di dalam Sumber Daya >> Aset >> JS >> bootstrap.js mengajukan. Saya sudah memasukkan yang terakhir.

// bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

require('./echo'); 

Ketika pengguna ada di sini, bergabung atau pergi, kita perlu memancarkan suatu acara. Jadi mari kita lakukan itu terlebih dahulu.

Di dalam Echo.js file, tulis kode berikut.

// echo.js

import Event from './event';

Echo.join('chat')
    .here(users => {
        Event.$emit('users.here', users);
    })
    .joining(user => {
        Event.$emit('users.joined', user);
    })
    .leaving(user => {
        Event.$emit('users.left', user);
    }) 

Di dalam UserComponent.vue file, tulis kode berikut. Kemudian, kami menulis kode yang mendengarkan acara yang dipancarkan dan mengubah antarmuka pengguna.

// UserComponent.vue






 

Oke, sekarang, saat pengguna baru masuk ke kami Laravel Aplikasi masuk ke URL ini: http: //chat.test/chat , kita dapat melihat di kotak pengguna, nama mereka muncul. Dingin!! Akhirnya, kami mendapatkan pembaruan real-time.

Saat pengguna pergi, array pengguna disaring ke pengguna itu, dan kami melihat pengguna yang tersisa.

Juga, ketika pengguna baru bergabung, kita dapat melihat nama pengguna yang baru bergabung.

Langkah 16: Kirim dan terima pesan waktu nyata.

Satu -satunya hal yang tersisa dari kita Tutorial Aplikasi Laravel Vue Obrolan Apakah pesan real-time dikirim dan diterima menggunakan Pusher.

Kita perlu membuat kelas acara di backend yang menyiarkan acara ketika pesan baru dibuat.

Jadi, buka terminal dan ketik perintah berikut untuk membuat acara.

php artisan make:event MessageCreated 

Saat kami menyimpan pesan, kami juga perlu menyiarkan pesan yang disimpan ke saluran. S

Jadi, tulis kode berikut di dalam Toko MessageController fungsi.

// MessageController.php

get();

        return response()->json($messages);
    }

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

        broadcast(new MessageCreated($message))
                ->toOthers();

        return response()->json($message);
    }
} 

Di dalam MessageCreated.php File, kita perlu mengambil argumen itu dan meneruskannya ke saluran.

// MessageCreated.php

message = $message;
    }

    public function broadcastWith()
    {
        $this->message->load(['user']);

        return [
            'message' => array_merge($this->message->toArray(), [
                'selfMessage' => false
            ])
        ];
    }

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

Pertama, kami telah mengimplementasikan Antarmuka Seharusnya Bahasa.

Kemudian, saya telah mengubah nama dari privatechannel menjadi presenceChannel dan meneruskan nama saluran kami “obrolan”.

Kemudian, kami menerima pesan dari pengontrol dan menyiarkan pesan itu melalui siaran dengan () fungsi.

Sekarang, di dalam Echo.js file, kita perlu menambahkan kode itu mendengarkan ke acara ini.

// echo.js

import Event from './event';

Echo.join('chat')
    .here(users => {
        Event.$emit('users.here', users);
    })
    .joining(user => {
        Event.$emit('users.joined', user);
    })
    .leaving(user => {
        Event.$emit('users.left', user);
    })
    .listen('MessageCreated', (data) => {
        Event.$emit('added_message', data.message);
    }); 

Setelah mendengarkan, ini menyiarkan acara lain, yang didengarkan oleh komponen Vue.js kami ChatmessageComponent.vue.

// ChatMessageComponent.vue




 

Akhirnya, jika semuanya kode dengan benar, kami dapat menguji kami Aplikasi Tutorial Aplikasi Laravel Vue Obrolan dengan berikut ini.

  1. Buka URL ini: http: //chat.test/chat.
  2. Jika Anda tidak masuk, Anda akan mengarahkan kembali ke penandatanganan, dan setelah itu, Anda akan tiba di halaman ini.
  3. Buka URL di atas dalam mode penyamaran: http: //chat.test/chat
  4. Daftarkan dengan pengguna lain dan tiba di halaman ini.
  5. Anda akan melihat bagian pengguna, dan dua pengguna online
  6. Sekarang, ketik pesan dan tekan enter.
  7. Di kedua jendela obrolan, pesan kami diperbarui tanpa penyegaran.
  8. Jika pengguna jendela obrolan lain membalas dengan pesan, kami juga mendapatkan pesan itu.
  9. Warna latar belakang pengirim dan penerima berbeda berdasarkan pengguna yang saat ini masuk.
  10. Akhirnya, Tutorial Aplikasi Laravel Vue Obrolan sudah selesai.

Saya telah memasang kode GitHub. Jadi kamu dapat memeriksanya juga.

Kode GitHub

Cara menggunakan kode github ini.

  1. Kloning repositori ini.
  2. Pergi ke proyek
  3. Ketik perintah ini: Pembaruan Komposer
  4. Kemudian perintah ini: Instal NPM
  5. Ubah siaran_driver = Pusher di .env mengajukan.
  6. Buat aplikasi pendorong dan ambil tombol aplikasi, rahasia, id, dan gugus.
  7. Dimasukkan ke dalam .env mengajukan. Anda perlu menempatkan klien dan server. Ingat, di .env File, Anda harus meletakkan dua kali; Sudah ada variabel yang didefinisikan oleh Laravel; Anda harus meletakkan nilainya.
  8. Migrasi tabel basis data dari perintah ini: PHP Artisan bermigrasi
  9. Mulai server pengembangan: PHP Artisan Serve
  10. Daftarkan dua pengguna.
  11. Pergi ke URL ini: http://localhost:8000/chat.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *