本文介绍了WebSocket的基本概念，包括其浏览器支持情况、API的基本用法、如何添加监听事件、发送消息以及处理连接状态变化。并通过一个简单的HTML和JavaScript示例展示了如何在网页中实现WebSocket通信。
1.1 检测浏览器支持的情况
if (window.WebSocket)
支持
else
不支持
1.2 API的基本用法
url = “ws//loaclhost:8888:/echo”;
w = new WebSocket(url);
或
w = new WebSocket(url, ["proto1", "proto2"];
使用已知的协议， 该协议被服务端和客户端所都接受， 比如XMPP， RFB等，用来开启通向公告WebSocket服务的大门。
1.2.1 添加监听事件
w.onopen = function () {
}
w.onmessage = function(e) {
}
w.onclose = function(e) {
}
w.onerror = function(e) {
}
1.2.2 发送消息
w.send("Message");
其中w.buffferedAmount属性，表示已在WebSocket发送但未写入网络的字节数。
WebSocket能发字符串，也能发送二进制的数据。
websocket.html
<!DOCTYPE html >
<html>
<head>
<meta charset ="UTF-8">
<title>WebSocket</title>
</head>
<body>
<div>
<input type ="text" id="inputMessage" value="Hello,
Web Socket"></input>
<input type ="button" id="sendBtn" value="send" ></input>
</div>
</body>
<script type ="text/javascript" src="./jquery-2.1.1.js"></script>
<script type ="text/javascript" src="./websocket.js"></script>
</html>
websocket.js
var log = function (s)
{
log.buffer.push(s);
};
log.buffer = [];
var url = "ws://localhost:8080/echo" ;
var w = new WebSocket(url); //新建 websocket连接
w.onpen = function()
{ //websocket连接上会被调用
w.send("12312");
};
w.onmessage = function (e)
{ //收到消息被调用
log(e.data);
};
w.onclose = function ()
{ //连接被关闭调用
log("closed");
};
$(function ()
{
if (!window.WebSocket)
{ //检测浏览器是否支持。
alert( "亲，很抱歉，您的浏览器不支持WebSocket" );
}
log(log.buffer.join( "\n"));
$("#sendBtn").click( function ()
{
w.send( "1231");
w.send($( "#inputMessage").val());
});
});
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
