0°

(十三)Hello,World!-通过WebSocket发送消息-PHPoC

硬件

  • PHPoC Blue(+ USB WLAN)或PHPoC Black(+以太网)
  • Micro USB转USB线(将源代码上传到PHPoC设备)

快速步骤

此示例的源代码是PHPoC支持包(PSP)的一部分。你需要:

  • 下载PHPoC支持包。
  • 示例\ p4s \ 04.html5_text \ 00.hello上传到PHPoC Blue / Black。
  • 配置网络参数(例如WiFi SSID,密码,IP地址……)。
  • 单击PHPoC Debugger上的“运行”按钮。
  • 使用PC或智能手机上的Web浏览器访问PHPoC上的网页

如果您是第一次使用PHPoC,请参阅如何使用PSP

源代码

源文件包括:

  • init.php:当PHPoC系统上电或复位时,运行此文件。它用于指定运行的文件是系统循环。
  • task0.php:此文件在PHPoC设备的系统循环中运行。它充当WebSocket服务器并且还与之交互。
  • index.php:此文件包含网页的源代码。它仅在响应Web浏览器的请求时运行。它包含网页(用户界面)并充当WebSocket客户端。

init.php

该文件在PHPoC系统上电或复位时运行。它用于指定 task0.php运行是系统循环。

PHP代码:

<?php

system("php task0.php");

?>

task0.php 

[完整代码]

PHP代码:

<?php

if(_SERVER("REQUEST_METHOD"))
 exit// avoid php execution via http request

include "/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";

ws_setup(0"WebConsole""text.phpoc");

while(1)
{
 if(ws_state(0) == TCP_CONNECTED)
 {
  ws_write(0"hello, world!\r\n");

  sleep(1);
 }
}

?>

[说明]

该文件的源代码:

  • 设置并初始化WebSocket。

在无限循环中:

  • 发送’你好,世界!’ 通过WebSocket访问Web浏览器。

index.php 

[完整代码]

PHP代码:

<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align:center; }
textarea { width:400pxheight:400pxpadding:10pxfont-family:courier; font-size:14px; }
 </style>
<script>
var ws;
var wc_max_len = 32768;
function ws_onopen()
{
 document.getElementById("ws_state").innerHTML = "OPEN";
 document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
 document.getElementById("ws_state").innerHTML = "CLOSED";
 document.getElementById("wc_conn").innerHTML = "Connect";

 ws.onopen = null;
 ws.onclose = null;
 ws.onmessage = null;
 ws = null;
}
function wc_onclick()
{
 if(ws == null)
 {
  ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/WebConsole""text.phpoc");
  document.getElementById("ws_state").innerHTML = "CONNECTING";

  ws.onopen = ws_onopen;
  ws.onclose = ws_onclose;
  ws.onmessage = ws_onmessage;
 }
 else
  ws.close();
}
function ws_onmessage(e_msg)
{
 e_msg = e_msg || window.event; // MessageEvent

 var wc_text = document.getElementById("wc_text");
 var len = wc_text.value.length;

 if(len > (wc_max_len + wc_max_len / 10))
  wc_text.innerHTML = wc_text.value.substring(wc_max_len / 10);

 wc_text.scrollTop = wc_text.scrollHeight;
 wc_text.innerHTML += e_msg.data;
}
function wc_clear()
{
 document.getElementById("wc_text").innerHTML = "";
}
</script>
</head>
<body>

<h2>
<p>
Web Console : <span id="ws_state">CLOSED</span><br>
</p>
<textarea id="wc_text" readonly="readonly"></textarea><br>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<button id="wc_clear" type="button" onclick="wc_clear();">Clear</button>
</h2>

</body>
</html>

[说明] index.php文件

源代码由HTML,CSS,JavaScript和PHPoC代码组成。 PHPoC代码在PHPoC设备上进行解释。 PHPoC代码可以添加/更新HTML,CSS或JavaScript代码的内容。在PHPoC中解释PHPoC代码后,剩下的代码是客户端代码,并返回到Web浏览器。Web浏览器接收此代码并对其进行解释以显示网页。

  • HTML:描述网页的结构
  • CSS:描述HTML元素的显示方式
  • JavaScript的:这段代码:通过WebSocket从PHPoC设备接收数据(’hello,world!’)
  • 显示’你好,世界!’ 在网页上
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论