實例: 即時通訊聊天室demo
可以打開兩個頁面互相發送消息查看。

?

websocket.js

/* 判斷瀏覽器是否內置了websocket */if ('WebSocket' in window) {websocket = new WebSocket('ws://180.76.144.202:19910/websocket');}websocket->onerror = 'onerror';websocket->onopen = 'onopen';websocket->onmessage = 'onmessage';websocket->onclose = 'onclose';websocket->onbeforeunload = 'onbeforeunload';websocket->closeWebSocket = 'closeWebSocket';weboskcet->send = 'send';/* 連接失敗時觸發 */function onerror () {setMessageInnerHTML('websocket connection error');}/* 連接成功時觸發 */function onopen () {setMessageInnerHTML('websocket connect success');}/* 收到新消息時觸發 */function onmessage (event) {setMessageInnerHTML(event);}/* 連接關閉時觸發 */function onclose () {setMessageInnerHTML('websocket connectionn closed');}/* 當窗口關閉時，主動關閉websocket連接。防止連接還沒斷開就關閉窗口,server端異常 */function onbeforeunload () {closeWebSocket();}/* 關閉websocket連接 */function closeWebSocket () {websocket.close();}/* 發送消息 */function send () {var message = document.getElementById('container').value;websocket.send(message);}

　instance.php:

<?phprequire_once "../../MeepoPS/index.php";$telnet = new \MeepoPS\Api\Websocket("0.0.0.0", 19910);$telnet->instanceName = "MeepoPS-Websocket";$telnet->callbackStartInstance = "callbackStartInstance"; $telnet->callbackConnect = "callbackConnect"; $telnet->callbackNewData = "callbackNewData"; $telnet->callbackSendBackBufferEmpty = "callbackSendBackBufferEmpty"; $telnet->callbackInstanceStop = "callbackInstanceStop"; $telnet->callbackConnectClose = "callbackConnectClose";function callbackStartInstance ($instance) {echo "實例" . $instance->instanceName . "啟動" . "\n"; }function callbackConnect ($connect) {foreach ($connect->instance->clientList as $client) {if ($connect->id != $client->id) {$client->send("新用戶" . $connect->id . "已經上線");}}var_dump("收到新鏈接. UniqueId = " . $connect->id . "\n"); }function callbackNewData ($connect, $data) {// $connect->send("用戶 " . $connect->id . "說:" . $data . "\n");var_dump("UnqiueId = " . $connect->id . "說:" . $data ."\n");foreach ($connect->instance->clientList as $client) {if ($connect->id != $client->id) {$client->send("群發:用戶" . $connect->id . "說: " . $data . "\n");}}}function callbackSendBufferEmpty ($connect) {var_dump("用戶 " . $connect->id . "的發送的消息隊列為空\n"); }function callbackInstanceStop ($instance) {foreach ($instance->clientList as $client) {$client->send("Service stop!");} }\MeepoPS\runMeepoPS();

　　

?

服務可以用MeepoPS/SWOOLE搭建：

　下面是MeepoPS實例

// 下載MeepoPS
git clone https://github.com/lixuancn/MeepoPS.git // 進入目錄
cd MeepoPS/Example/Chat_Robot

// 普通模式啟動：
sudo php instance.php start
// 守護進程模式啟動：
sudo php instance.php start -d

守護進程啟動下：
ps -aux | grep php
能看到instance.php 說明啟動成功了。



注意瀏覽器訪問的端口和instance.php 端口一致。
例如 centos 7 防護墻查看端口19911 是否開啟：


// 查看防火墻狀態：
systemctl status firewalld.service

// 開啟端口19911
firewalld-cmd --permanent --zone=public --add-port=19911/tcp

// 重啟防火墻查看端口：

systemctl restart firewalld.service
firewall-cmd --query-port=19910/tcp

如果出現yes即為開啟成功。



打開瀏覽器訪問websocket.js，控制臺查看log.

轉載于:https://www.cnblogs.com/phpcurd/p/9216541.html

總結

以上是生活随笔為你收集整理的JavaScript websocket 实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。