JavaScript websocket 实例

实例:

即时通讯聊天室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.