webman/push

webman/push เป็นปลั๊กอินเซิร์ฟเวอร์การส่งข้อความที่ฟรี โดยใช้เทคโนโลยีแบบการสมัครสมาชิกที่เข้ากันได้กับ pusher ซึ่งมีลูกค้ามากมายเช่น JS, Android (java), IOS (swift), IOS (Obj-C), uniapp, .NET, Unity, Flutter, AngularJS ฯลฯ SDK การส่งข้อความในฝั่งเซิร์ฟเวอร์รองรับ PHP, Node, Ruby, Asp, Java, Python, Go, Swift ฯลฯ ลูกค้าทางด้านสนับสนุนการเชื่อมต่อกับการตรวจสอบสถานะการทำงาน (heartbeat) และการเชื่อมต่อใหม่อัตโนมัติที่สะดวกและเสถียรเหมาะสำหรับการส่งข้อความ, การแชท และหลายสถานการณ์การสื่อสารที่มีช่วงเวลาเฉียบพลัน

ปลั๊กอินมาพร้อมกับเว็บไคลเอนต์ js push.js และไคลเอนต์ uniapp uniapp-push.js ส่วนไคลเอนต์อื่น ๆ สามารถดาวน์โหลดได้ที่ https://pusher.com/docs/channels/channels_libraries/libraries/

การติดตั้ง

composer require webman/push

ไคลเอนต์ (javascript)

นำเข้าไคลเอนต์ javascript

<script src="/plugin/webman/push/push.js"> </script>

การใช้ไคลเอนต์ (ช่องสาธารณะ)

// สร้างการเชื่อมต่อ
var connection = new Push({
    url: 'ws://127.0.0.1:3131', // ที่อยู่ websocket
    app_key: '<app_key, ดึงจาก config/plugin/webman/push/app.php>',
    auth: '/plugin/webman/push/auth' // การตรวจสอบสิทธิ์การสมัครสมาชิก (เฉพาะช่องส่วนตัว)
});
// สมมุติว่าผู้ใช้ uid เป็น 1
var uid = 1;
// เบราว์เซอร์รับฟังข่าวสารจากช่อง user-1 ซึ่งเป็นข่าวสารของผู้ใช้ uid 1
var user_channel = connection.subscribe('user-' + uid);

// เมื่อช่อง user-1 มีเหตุการณ์ message
user_channel.on('message', function(data) {
    // data คือเนื้อหาข้อความ
    console.log(data);
});
// เมื่อช่อง user-1 มีเหตุการณ์ friendApply
user_channel.on('friendApply', function (data) {
    // data คือข้อมูลการขอเป็นเพื่อน
    console.log(data);
});

// สมมุติว่ากลุ่ม id เป็น 2
var group_id = 2;
// เบราว์เซอร์รับฟังข่าวสารจากช่อง group-2 ซึ่งเป็นข่าวสารกลุ่ม 2
var group_channel = connection.subscribe('group-' + group_id);
// เมื่อกลุ่ม 2 มีเหตุการณ์ข่าวสาร
group_channel.on('message', function(data) {
    // data คือเนื้อหาข้อความ
    console.log(data);
});

เคล็ดลับ
ตัวอย่างข้างต้น subscribe ใช้สำหรับสมัครสมาชิกช่อง message friendApply เป็นเหตุการณ์บนช่อง ช่องและเหตุการณ์สามารถเป็นสตริงใดก็ได้ ไม่ต้องมีการตั้งค่าล่วงหน้าจากเซิร์ฟเวอร์

การส่งข้อความจากเซิร์ฟเวอร์ (PHP)

use Webman\Push\Api;
$api = new Api(
    // ในเว็บแมนสามารถใช้ config เพื่อดึงการตั้งค่าได้โดยตรง ในสภาพแวดล้อมที่ไม่ใช่เว็บแมนต้องเขียนการตั้งค่าที่เหมาะสม
    'http://127.0.0.1:3232',
    config('plugin.webman.push.app.app_key'),
    config('plugin.webman.push.app.app_secret')
);
// ส่งข้อความเหตุการณ์ message ไปยังลูกค้าทั้งหมดที่สมัคร channel user-1
$api->trigger('user-1', 'message', [
    'from_uid' => 2,
    'content'  => 'สวัสดี นี่คือเนื้อหาข้อความ'
]);

ช่องส่วนตัว

ในตัวอย่างข้างต้นผู้ใช้ใด ๆ สามารถสมัครสมาชิกข้อมูลผ่าน Push.js ได้ หากข้อมูลนั้นเป็นข้อมูลที่ละเอียดอ่อน การกระทำดังกล่าวก็ไม่ปลอดภัย

webman/push รองรับการสมัครช่องส่วนตัว ช่องส่วนตัวจะเริ่มต้นด้วย private- เช่น

var connection = new Push({
    url: 'ws://127.0.0.1:3131', // ที่อยู่ websocket
    app_key: '<app_key>',
    auth: '/plugin/webman/push/auth' // การตรวจสอบสิทธิ์การสมัครสมาชิก (เฉพาะช่องส่วนตัว)
});

// สมมุติว่าผู้ใช้ uid เป็น 1
var uid = 1;
// เบราว์เซอร์รับฟังข่าวสารจากช่อง private-user-1
var user_channel = connection.subscribe('private-user-' + uid);

เมื่อไคลเอนต์สมัครสมาชิกช่องส่วนตัว (ช่องที่เริ่มต้นด้วย private-) เบราว์เซอร์จะทำการขอการตรวจสอบสิทธิ์ AJAX (ที่อยู่ AJAX คือที่อยู่ที่ระบุในพารามิเตอร์ auth ขณะที่สร้างใหม่จาก Push) นักพัฒนาสามารถตรวจสอบที่นี่ได้ว่าผู้ใช้นั้นมีสิทธิ์ที่จะติดตามช่องนี้หรือไม่ ซึ่งจะป้องกันความปลอดภัยในการสมัครสมาชิกได้

ดูข้อมูลการตรวจสอบสิทธิ์ที่ config/plugin/webman/push/route.php

การส่งข้อความจากไคลเอนต์

ตัวอย่างข้างต้นทั้งหมดเป็นการสมัครสมาชิกช่องจากไคลเอนต์และเซิร์ฟเวอร์เรียก API เพื่อส่งข้อความ webman/push ยังรองรับการส่งข้อความจากไคลเอนต์โดยตรง

หมายเหตุ
การส่งข้อความระหว่างไคลเอนต์รองรับเฉพาะช่องส่วนตัว (ช่องที่เริ่มต้นด้วย private-) และไคลเอนต์สามารถเรียกใช้งานเฉพาะเหตุการณ์ที่เริ่มต้นด้วย client-

ตัวอย่างการส่งข้อความจากไคลเอนต์

var user_channel = connection.subscribe('private-user-1');
user_channel.on('client-message', function (data) {
    // 
});
user_channel.trigger('client-message', {form_uid:2, content:"สวัสดี"});

หมายเหตุ
โค้ดข้างต้นจะส่งข้อมูลเหตุการณ์ client-message ไปยังลูกค้าทั้งหมด (ยกเว้นไคลเอนต์ปัจจุบัน) ที่สมัครสมาชิก private-user-1 (ไคลเอนต์ที่ทำการส่งข้อมูลจะไม่ได้รับข้อมูลที่ตนเองส่ง)

webhook

webhook ใช้เพื่อรับเหตุการณ์บางอย่างจากช่อง

ปัจจุบันมี 2 เหตุการณ์หลัก:

    1. channel_added
      เป็นเหตุการณ์ที่จะถูกกระตุ้นเมื่อช่องที่ไม่มีลูกค้าออนไลน์เปลี่ยนเป็นมีลูกค้าออนไลน์ หรือพูดอีกอย่างคือเหตุการณ์ออนไลน์
    1. channel_removed
      เป็นเหตุการณ์ที่จะถูกกระตุ้นเมื่อช่องทั้งหมดของลูกค้าออนไลน์ได้ออกจากระบบ หรือพูดอีกอย่างคือเหตุการณ์ออฟไลน์

เคล็ดลับ
เหตุการณ์เหล่านี้มีประโยชน์ในการดูแลสถานะออนไลน์ของผู้ใช้

หมายเหตุ
ที่อยู่ webhook จะถูกตั้งค่าใน config/plugin/webman/push/app.php
รหัสที่ใช้ในการจัดการเหตุการณ์ webhook สามารถอ้างอิงได้ที่ logic ใน config/plugin/webman/push/route.php
การรีเฟรชหน้าจออาจทำให้ผู้ใช้ออฟไลน์ชั่วคราวไม่ถือว่าเป็นการออฟไลน์ webman/push จะทำการประเมินระยะเวลา ดังนั้นเหตุการณ์ออนไลน์/ออฟไลน์จะมีการหน่วงระหว่าง 1-3 วินาที

wss proxy (SSL)

เมื่อใช้ https ไม่สามารถใช้งานการเชื่อมต่อ ws ได้ ต้องใช้การเชื่อมต่อ wss ในกรณีนี้สามารถใช้ nginx เพื่อเป็นพร็อกซี่ wss การตั้งค่าอาจมีลักษณะเช่นนี้:

server {
    # .... การตั้งค่าอื่น ๆ ที่ถูกละเว้น ...

    location /app/<app_key>
    {
        proxy_pass http://127.0.0.1:3131;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
    }
}

หมายเหตุ ในการตั้งค่าข้างต้น app_key จะดึงจาก config/plugin/webman/push/app.php

หลังจากเริ่ม nginx ใหม่ ให้เชื่อมต่อกับเซิร์ฟเวอร์ด้วยวิธีการต่อไปนี้

var connection = new Push({
    url: 'wss://example.com',
    app_key: '<app_key, ดึงจาก config/plugin/webman/push/app.php>',
    auth: '/plugin/webman/push/auth' // การตรวจสอบสิทธิ์การสมัครสมาชิก (เฉพาะช่องส่วนตัว)
});

หมายเหตุ

  1. ที่อยู่การร้องขอเริ่มด้วย wss
  2. ไม่ต้องเขียนพอร์ต
  3. ต้องเชื่อมต่อด้วย ชื่อโดเมนที่สอดคล้องกับใบรับรอง SSL

คำแนะนำการใช้ push-vue.js

  1. คัดลอกไฟล์ push-vue.js ไปยังไดเรกทอรีโปรเจกต์ เช่น: src/utils/push-vue.js

  2. นำเข้าในหน้า vue



## ที่อยู่ลูกค้าอื่น ๆ
`webman/push` เข้ากันได้กับ pusher ที่อยู่ลูกค้าภาษาอื่น (Java Swift .NET Objective-C Unity Flutter Android IOS AngularJS ฯลฯ) ดาวน์โหลดได้ที่:
https://pusher.com/docs/channels/channels_libraries/libraries/