HTML5 WebSockets功能的例子

最新推荐文章于 2024-07-26 09:27:22 发布

.NET跨平台

最新推荐文章于 2024-07-26 09:27:22 发布

阅读量3.2k

点赞数

分类专栏： HTML5+CSS|CSS3 Socket | Websocket | SignalR 文章标签： html5 javascript websockets API 前端

本文链接：https://blog.csdn.net/WuLex/article/details/51935894

版权

HTML5+CSS|CSS3 同时被 2 个专栏收录

153 篇文章 10 订阅

订阅专栏

Socket | Websocket | SignalR

12 篇文章 2 订阅

订阅专栏

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");

结果如图: