大佬教程收集整理的这篇文章主要介绍了Html5 中的 WebSocket通信，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}
@H_262_7@2、WebSocket对象的创建和服务器连接
@H_262_7@要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
@H_262_7@建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。
w = new WebSocket(url,["proto1","proto2"]);
@H_262_7@假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(E) {
//确定服务器选择的协议
log(e.target.protocol);
}
@H_262_7@3、添加事件监听器
@H_262_7@WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。 w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}
@H_262_7@4、发送消息
@H_262_7@当socket处于打开状态（即onopen之后，onclose之前），可以用SEnd方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。
w.send();
@H_262_7@你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferamount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedamount < bufferThreshold) {
w.send(document.getElementById("inputmessage").value);
}
}
@H_262_7@WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8,6,7,5,3,0,9]);
w.send(a.buffer);
@H_262_7@常量-readyState属性
@H_262_7@这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。
| Constant | Value | Description | @H_616_240@CONNECTinG | 0 | 连接还没开启。 | @H_616_240@OPEN | 1 | 连接已开启并准备好进行通信。 | @H_616_240@CLOSING | 2 | 连接正在关闭的过程中。 | @H_616_240@CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
|---|
<!DOCTYPE html>
<html>
<head>
<title>webSocket实例</title>
</head>
<body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<div id="message"></div>
<script type="text/javascript"> var socket; var readyState = ["正在连接","已经连接","正在断开","已经断开"]; var message = document.getElementById('message'); function connect(){ try{ var url = 'ws:localhost/test'; socket = new webSocket(url); message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>"; socket.onopen = function(){ message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>"; } socket.onmessage = function(msg){ message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>"; } socket.onclose = function(){ message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>"; } }catch(exception){ // socket.onerror = function(){ message.innerHTML += "<p>发生错误！"+"</p>"; // } } } function send(){ var text = document.getElementById('text').value; try{ socket.send(text); message.innerHTML += "<p>发送数据：" + text +"</p>"; }catch(exception){ message.innerHTML += "<p>发送数据出错</p>"; } } function disconnect(){ socket.close(); } </script>
</body>
</html>
以上是大佬教程为你收集整理的Html5 中的 WebSocket通信全部内容，希望文章能够帮你解决Html5 中的 WebSocket通信所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。