Cara Menggunakan WebSocket Motrix di Laravel & Vue.js (Tanpa JWT)

WebSocket memungkinkan komunikasi real-time antara client dan server. Pada tutorial ini, kita akan belajar cara menghubungkan aplikasi frontend Vue.js ke server WebSocket Motrix (Node.js) tanpa autentikasi JWT, sementara Laravel tetap digunakan sebagai backend API biasa.

---

1. Menjalankan Server WebSocket Motrix

Pastikan server Motrix sudah berjalan di komputer kamu:

npm install
npm start

Secara default, server akan aktif di ws://localhost:3000.

---

2. Laravel sebagai Backend API

Laravel tetap digunakan untuk kebutuhan API (misal: login, register, CRUD data), tidak perlu konfigurasi khusus untuk WebSocket jika hanya ingin menggunakan Motrix sebagai server real-time.

---

3. Integrasi di Vue.js

Install Socket.IO client di project Vue.js kamu:

npm install socket.io-client

Contoh Koneksi dan Penggunaan di Komponen Vue

// src/plugins/socket.js
import { io } from "socket.io-client";

const socket = io("http://localhost:3000"); // tanpa JWT

export default socket;

<!-- src/components/Chat.vue -->
<template>
  <div>
    <input v-model="roomId" placeholder="Room ID" />
    <button @click="joinRoom">Join Room</button>
    <input v-model="message" placeholder="Message" />
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, idx) in messages" :key="idx">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
import socket from "@/plugins/socket";

export default {
  data() {
    return {
      roomId: "",
      message: "",
      messages: []
    };
  },
  mounted() {
    socket.on("RECEIVE_MESSAGE", (data) => {
      this.messages.push(`[${data.roomId}] ${data.message}`);
    });
  },
  methods: {
    joinRoom() {
      socket.emit("JOIN_ROOM", this.roomId);
    },
    sendMessage() {
      socket.emit("SEND_MESSAGE", { roomId: this.roomId, message: this.message });
      this.message = "";
    }
  }
};
</script>

---

4. Testing

1. Jalankan server Motrix.
2. Jalankan aplikasi Vue.js.
3. Buka beberapa tab/browser, join ke room yang sama, lalu kirim pesan.
4. Pesan akan diterima secara real-time di semua client yang join ke room tersebut.

---

5. Catatan

• Jika ingin menggunakan fitur autentikasi, bisa menambahkannya nanti sesuai kebutuhan.
• Pastikan port dan alamat server Motrix sesuai dengan konfigurasi di Vue.js.
• Untuk produksi, gunakan protokol HTTPS/WSS.

---

Selamat mencoba membangun aplikasi real-time dengan Motrix, Laravel, dan Vue.js tanpa ribet autentikasi!