Xây dựng webSocket với laravel-echo phần 1 - [Public-channel]

PiraGo Staff -

Requirement OS

Websocket là gì?
Websocket là 1 loại công nghệ hỗ trợ giao tiếp 2 chiều giữa Client và server.
Công nghệ này sử dụng giao thức TCP (Transmission Control Protocol ) để kết nối thông tin với nhau trong môi trường Internet.
Ứng dụng yêu cầu độ realtime như gọi video, chơi game trực tuyến,... sẽ được hỗ trợ tốt hơn. Những lập trình viên tạo web hoặc app có tính năng realtime sẽ ưu tiên sử dụng giao thức WebSocket hơn.
Nếu như giao thức HTTP có cấu trúc là http:// hoặc https:// thì WebSocket có 2 tiêu chuẩn về cấu trúc như sau.

  • Cấu trúc thông thường: ws://
  • Cấu trúc secure: wss://

Bạn sẽ có được kinh nghiệm gì khi xem kỹ video và bài blog này?

  • Làm chủ được các ứng dụng chát realtime, group chát, team chat
  • Tự xây dựng được 1 websocket riêng, không cần đến bên thứ 3
  • Deeping hơn về redis, broadcasting, event in laravel

Repository Project:
Chú ý đọc kỹ phần readme có phần setting project rồi nhé.
https://gitlab.com/phongdat/web-socket
Youtube: https://youtu.be/IE4ylBCYubI

Coding Start
Step 1: create-project laravel
Step 2:

  • require laravel/ui (composer require laravel/ui)
  • php artisan ui vue --auth

Step 3:

Step 4: Cấu hình laravel-echo-server
import Echo from 'laravel-echo';

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

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

Step 5: Make Event (php artisan make:event NewMessage)
+ Note: có 3 kiểu channel: public, private, presence

public function broadcastOn() // define channel
{
return new Channel('chat');
}

public function broadcastWith() { //return data channel
return ['user' => $this->user];
}

Step 6: config database

Step 7: cấu hình env
Mặc định BROADCAST_DRIVER=log. Khi broadcast sẽ ghi log dữ liệu lại
install predis (composer require predis/predis).
Sau đó cấu hình lại môi trường

BROADCAST_DRIVER=redis
REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
REDIS_PREFIX=""

Step 8: receiving data
window.Echo.channel('chat')
.listen('NewMessage', (data) => {
console.log('data', data)
});

Bonus: Sau khi run project thành công các bạn có thể cài đặt và sử dụng extension phpredis. Đây là 1 extension của php. gói này sẽ thay cho predis.(https://laravel.com/docs/8.x/redis#predis)