HTML5 WebSockets功能的例子
2016-07-18 00:15
435 查看
Index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Web Sockets 示例</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1>Web Sockets 示例</h1>
<form name="send_message" method="POST" onSubmit="return control(this);" action="javascript:Send()">
<table class="w50 fright">
<tr>
<td colspan="3"><input type="text" name="msg" placeholder="输入您的信息..."/></td>
</tr>
<tr>
<td class="tacenter"><input type="submit" value="发送"/></td>
<td class="tacenter"><a href="javascript:Connect('ws://echo.websocket.org');" class="submit_like">登录</a></td>
<td class="tacenter"><a href="javascript:Close()" class="submit_like">注销</a></td>
</tr>
</table>
</form>
<ul class="w50 fleft" id="operations"></ul>
<script src="js/script.js"></script>
</body>
</html>
style.css的内容如下:
body{
font-family:Calibri, sans-serif;
font-size:14px;
width:800px;
margin:auto;
}
h1, h2, h3, h4, h5, h6{
text-align:center;
color: rgb(177, 202, 0);
text-shadow: 0.3em 0.3em 2px #DDDDDD;
}
table{
width: 100%;
}
input[type="text"]{
padding: 0.5em;
color: #333;
width: 100%;
}
input[type="submit"], .submit_like{
padding: 0.3em 1em;
border-radius: 1px;
background-color: rgba(177, 202, 0, 0.1);
background-color: #CCCCCC;
border: 1px gray solid;
color: black;
text-decoration: none;
}
input[type="submit"]:focus{
box-shadow: 0 0 5px rgb(177, 202, 0);
}
input[type="submit"]:active{
box-shadow: 0 0 10px rgb(177, 202, 0);
}
#operations{
list-style-type: none;
padding: 0;
}
.w50{ width: 50%; }
.w25{ width: 25%; }
.fleft{ float: left; }
.fright{ float: right; }
.tacenter{ text-align:center; }
.websocketmsg{
font-family: monospace;
color: rgb(177, 202, 0);
font-weight: bold;
}
.websocketstatus{
color: gray;
font-style: italic;
}
.websocketerror{
color: red;
}
script.js的代码如下:
ws = null;
function ReadyState(int_val)
{
switch(int_val)
{
case WebSocket.CONNECTING: return "连接...";
case WebSocket.OPEN : return "连接！!";
case WebSocket.CLOSING : return "断开...";
case WebSocket.CLOSED : return "断开成功！";
}
}
function Log(str, class_attr)
{
var list = document.getElementById("operations");
var li = document.createElement("li");
if(class_attr !== undefined)
li.setAttribute("class", class_attr);
li.innerHTML = str;
list.insertBefore(li, list.firstChild);
}
/*
* 创建一个新的WebSocket并尝试打开与URI的连接。
*/
function Connect(uri)
{
if(null !== ws)
{
Log("您已连接。", "websocketerror");
return;
}
try
{
//Assurons-nous que la classe WebSocket existe sur notre navigateur
if(!window.WebSocket)
throw "无法使用的WebSocket。您的浏览器没有实现它。";
Log("尝试连接到 " + uri);
ws = new WebSocket(uri);
if(undefined === ws)
throw "无法创建一个退出点。";
Log(ReadyState(ws.readyState), "websocketstatus");
ws.onopen = function()
{
Log(ReadyState(ws.readyState), "websocketstatus");
}
ws.onclose = function(e)
{
Log(ReadyState(ws.readyState), "websocketstatus");
if(e.wasClean)
{
Log("连接正确完成。", "websocketstatus");
}
else
{
Log(e.reason, "websocketerror");
Log("连接终止。", "websocketstatus");
}
ws = null;
}
ws.onerror = function(e)
{
Log("发生了错误。", "websocketerror");
}
ws.onmessage = function(e)
{
Log("收到方 > " + e.data, "websocketmsg");
}
}
catch(str)
{
Log(str, "websocketerror");
}
}
function control(f)
{
if(0 === f.msg.value.length)
{
Log("您没有输入任何东西...", "websocketerror");
return false;
}
else
return true;
}
function Close()
{
if(null === ws)
{
Log("您还没有登录。", "websocketerror");
return;
}
ws.close();
Log(ReadyState(ws.readyState), "websocketstatus");
}
function Send()
{
if(null === ws)
{
Log("您还没有登录。", "websocketerror");
return;
}
var f = document.forms["send_message"];
if(!f)
{
console.log("无法找到表单，发送取消。");
return;
}
ws.send(f.msg.value);
Log("发送者> " + f.msg.value, "websocketmsg");
}
var f = document.forms["send_message"];
if(!f)
{
Log("无法找到表单，关闭。");
}
f.msg.focus();
Connect("ws://echo.websocket.org");
结果如图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Web Sockets 示例</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1>Web Sockets 示例</h1>
<form name="send_message" method="POST" onSubmit="return control(this);" action="javascript:Send()">
<table class="w50 fright">
<tr>
<td colspan="3"><input type="text" name="msg" placeholder="输入您的信息..."/></td>
</tr>
<tr>
<td class="tacenter"><input type="submit" value="发送"/></td>
<td class="tacenter"><a href="javascript:Connect('ws://echo.websocket.org');" class="submit_like">登录</a></td>
<td class="tacenter"><a href="javascript:Close()" class="submit_like">注销</a></td>
</tr>
</table>
</form>
<ul class="w50 fleft" id="operations"></ul>
<script src="js/script.js"></script>
</body>
</html>
style.css的内容如下:
body{
font-family:Calibri, sans-serif;
font-size:14px;
width:800px;
margin:auto;
}
h1, h2, h3, h4, h5, h6{
text-align:center;
color: rgb(177, 202, 0);
text-shadow: 0.3em 0.3em 2px #DDDDDD;
}
table{
width: 100%;
}
input[type="text"]{
padding: 0.5em;
color: #333;
width: 100%;
}
input[type="submit"], .submit_like{
padding: 0.3em 1em;
border-radius: 1px;
background-color: rgba(177, 202, 0, 0.1);
background-color: #CCCCCC;
border: 1px gray solid;
color: black;
text-decoration: none;
}
input[type="submit"]:focus{
box-shadow: 0 0 5px rgb(177, 202, 0);
}
input[type="submit"]:active{
box-shadow: 0 0 10px rgb(177, 202, 0);
}
#operations{
list-style-type: none;
padding: 0;
}
.w50{ width: 50%; }
.w25{ width: 25%; }
.fleft{ float: left; }
.fright{ float: right; }
.tacenter{ text-align:center; }
.websocketmsg{
font-family: monospace;
color: rgb(177, 202, 0);
font-weight: bold;
}
.websocketstatus{
color: gray;
font-style: italic;
}
.websocketerror{
color: red;
}
script.js的代码如下:
ws = null;
function ReadyState(int_val)
{
switch(int_val)
{
case WebSocket.CONNECTING: return "连接...";
case WebSocket.OPEN : return "连接！!";
case WebSocket.CLOSING : return "断开...";
case WebSocket.CLOSED : return "断开成功！";
}
}
function Log(str, class_attr)
{
var list = document.getElementById("operations");
var li = document.createElement("li");
if(class_attr !== undefined)
li.setAttribute("class", class_attr);
li.innerHTML = str;
list.insertBefore(li, list.firstChild);
}
/*
* 创建一个新的WebSocket并尝试打开与URI的连接。
*/
function Connect(uri)
{
if(null !== ws)
{
Log("您已连接。", "websocketerror");
return;
}
try
{
//Assurons-nous que la classe WebSocket existe sur notre navigateur
if(!window.WebSocket)
throw "无法使用的WebSocket。您的浏览器没有实现它。";
Log("尝试连接到 " + uri);
ws = new WebSocket(uri);
if(undefined === ws)
throw "无法创建一个退出点。";
Log(ReadyState(ws.readyState), "websocketstatus");
ws.onopen = function()
{
Log(ReadyState(ws.readyState), "websocketstatus");
}
ws.onclose = function(e)
{
Log(ReadyState(ws.readyState), "websocketstatus");
if(e.wasClean)
{
Log("连接正确完成。", "websocketstatus");
}
else
{
Log(e.reason, "websocketerror");
Log("连接终止。", "websocketstatus");
}
ws = null;
}
ws.onerror = function(e)
{
Log("发生了错误。", "websocketerror");
}
ws.onmessage = function(e)
{
Log("收到方 > " + e.data, "websocketmsg");
}
}
catch(str)
{
Log(str, "websocketerror");
}
}
function control(f)
{
if(0 === f.msg.value.length)
{
Log("您没有输入任何东西...", "websocketerror");
return false;
}
else
return true;
}
function Close()
{
if(null === ws)
{
Log("您还没有登录。", "websocketerror");
return;
}
ws.close();
Log(ReadyState(ws.readyState), "websocketstatus");
}
function Send()
{
if(null === ws)
{
Log("您还没有登录。", "websocketerror");
return;
}
var f = document.forms["send_message"];
if(!f)
{
console.log("无法找到表单，发送取消。");
return;
}
ws.send(f.msg.value);
Log("发送者> " + f.msg.value, "websocketmsg");
}
var f = document.forms["send_message"];
if(!f)
{
Log("无法找到表单，关闭。");
}
f.msg.focus();
Connect("ws://echo.websocket.org");
结果如图:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5的地理定位
- html5 的拖放
- HTML5表单新增元素与属性
- html5 audio音频播放全解析
- HTML5结构
- HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素
- HTML5新增的主体元素article、section、nav、aside、time元素和pubdate属性
- Sublime Text 3如何快速生成HTML5的头部信息和常用的快捷键
- HTML5 拖拽事件
- HTML5的Video标签的属性,方法和事件汇总
- HTML5基础学习笔记（十一）
- html5地理位置定位功能小析
- html5拖拽
- HTML5-3
- HTML5-2
- HTML5-1
- HTML5和CSS3实例教程[总结一]
- html5地理定位原理
- html5语义化标签
- 在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？