php – swoole – 架設 websocket 進階範例

2017-10-06 / JSN / 2 Comments / 1,766 次瀏覽

看過 上一篇(swoole 架設 websocket 範例) 後，應該都有概念了，這次用非常簡單的程式碼建立一個範例，會讓你更有感覺資料的傳送/接收。

影片範例

Composer

使用 jsnlib/swoole 輔助工具來簡化 onMessage 事件。

"require": {
    "jsnlib/swoole": "^1.0"
}

composer update

Swoole.php

<?php
require_once 'vendor/autoload.php'; 

// 建立 websocket 物件，監聽 0.0.0.0:8080 連接埠
$ws = new swoole_websocket_server("0.0.0.0", 8080); // 0.0.0.0 等於 localhost

// 監聽 WebSocket 連接打開事件
$ws->on('open', function ($ws, $request) {
	echo "進入者編號：{$request->fd}\n";
});

// 監聽 WebSocket 訊息事件
$ws->on('message', function ($ws, $frame) {

	echo "收到進入者 {$frame->fd} 訊息: {$frame->data} \n";

 	\Jsnlib\Swoole::push_all([
		'ws'           => $ws,
		'self'         => $frame->fd,
		'is_send_self' => false,
		'data'         => $frame->data
 	]);

});

// 今天 WebSocket 連接關閉事件
$ws->on('close', function ($ws, $fd) {
	echo "離開者編號：{$fd}\n";
});

$ws->start();

client.html

<input type="text" class="name" placeholder="請輸入姓名" autofocus>
<input type="submit" value="發送" onclick="send_msg(); ">

var wsServer = 'ws://chat.websocket.dennings.org:8080';
var websocket = new WebSocket(wsServer);

websocket.onopen = function (evt) {
	console.log("成功連接到 WebSocket 服務");
};

websocket.onclose = function (evt) {
	console.log("關閉連接 WebSocket 服務");
};

websocket.onmessage = function (evt) {
	console.log('伺服器顯示:' + evt.data);
};

websocket.onerror = function (evt, e) {
	console.log('發生錯誤: ' + evt.data);
};


// 發送訊息給所有人
const send_msg = function (){
	var name = document.getElementsByClassName('name')[0].value;
	var msg = JSON.stringify({
		message: '你好，我是' + name,
	})
	websocket.send(msg)
}