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 เหตุการณ์หลัก:
-
- channel_added
เป็นเหตุการณ์ที่จะถูกกระตุ้นเมื่อช่องที่ไม่มีลูกค้าออนไลน์เปลี่ยนเป็นมีลูกค้าออนไลน์ หรือพูดอีกอย่างคือเหตุการณ์ออนไลน์
- channel_added
-
- channel_removed
เป็นเหตุการณ์ที่จะถูกกระตุ้นเมื่อช่องทั้งหมดของลูกค้าออนไลน์ได้ออกจากระบบ หรือพูดอีกอย่างคือเหตุการณ์ออฟไลน์
- 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' // การตรวจสอบสิทธิ์การสมัครสมาชิก (เฉพาะช่องส่วนตัว)
});
หมายเหตุ
- ที่อยู่การร้องขอเริ่มด้วย wss
- ไม่ต้องเขียนพอร์ต
- ต้องเชื่อมต่อด้วย ชื่อโดเมนที่สอดคล้องกับใบรับรอง SSL
คำแนะนำการใช้ push-vue.js
-
คัดลอกไฟล์ push-vue.js ไปยังไดเรกทอรีโปรเจกต์ เช่น: src/utils/push-vue.js
-
นำเข้าในหน้า vue
## ที่อยู่ลูกค้าอื่น ๆ
`webman/push` เข้ากันได้กับ pusher ที่อยู่ลูกค้าภาษาอื่น (Java Swift .NET Objective-C Unity Flutter Android IOS AngularJS ฯลฯ) ดาวน์โหลดได้ที่:
https://pusher.com/docs/channels/channels_libraries/libraries/