发布网友 发布时间:2022-04-20 03:24
共3个回答
懂视网 时间:2022-04-20 07:45
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 使用ws或wss协议,是下一代客户端-服务器的异步通信方法。
在WebSocket API中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request),然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求(reuqest)。
在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即使服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端,只要客户端打开的socket与服务器建立连接后,就可以把数据推送到这个socket上,从被动转为主动。
WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。
WebSocket对象
WebSocket在DOM中是window对象的子对象,它具有:
WebSocket(url)构造函数。
readyState。只读属性,其值可以是CONNECTING(0),OPEN(1),CLOSED(3)。
boolean send(in DOMString data)
void close()两个方法,分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性,分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() { if (window.WebSocket) { //supported } else { // not supported } }
2、WebSocket对象的创建和服务器连接
要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
建立WebSocket连接时,可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称,它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) { //确定服务器选择的协议 log(e.target.protocol); }
3、添加事件监听器
WebSocket编程遵循异步编程模型;打开socket后,只需等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件:open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误,如以下示例所示。
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"); }
4、发送消息
当socket处于打开状态(即onopen之后,onclose之前),可以用send方法来发送消息。消息发送完,可以调用close方法来终止连接,也可以不这么做,让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前,有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() { if (w.bufferedAmount < bufferThreshold) { w.send(document.getElementById("inputMessage").value); } }
WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值,可以用来描述WebSocket连接的状态。
Constant | Value | Description |
---|---|---|
CONNECTING | 0 | 连接还没开启。 |
OPEN | 1 | 连接已开启并准备好进行通信。 |
CLOSING | 2 | 连接正在关闭的过程中。 |
CLOSED | 3 | 连接已经关闭,或者连接无法建立。 |
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> <p id="message"></p> <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>
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 使用ws或wss协议,是下一代客户端-服务器的异步通信方法。
在WebSocket API中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request),然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。
而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求(reuqest)。
在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即使服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端,只要客户端打开的socket与服务器建立连接后,就可以把数据推送到这个socket上,从被动转为主动。
WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。
WebSocket对象
WebSocket在DOM中是window对象的子对象,它具有:
WebSocket(url)构造函数。
readyState。只读属性,其值可以是CONNECTING(0),OPEN(1),CLOSED(3)。
boolean send(in DOMString data)
void close()两个方法,分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性,分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() { if (window.WebSocket) { //supported } else { // not supported } }
2、WebSocket对象的创建和服务器连接
要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo"; w = new WebSocket(url);
建立WebSocket连接时,可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称,它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) { //确定服务器选择的协议 log(e.target.protocol); }
3、添加事件监听器
WebSocket编程遵循异步编程模型;打开socket后,只需等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件:open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误,如以下示例所示。
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"); }
4、发送消息
当socket处于打开状态(即onopen之后,onclose之前),可以用send方法来发送消息。消息发送完,可以调用close方法来终止连接,也可以不这么做,让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前,有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() { if (w.bufferedAmount < bufferThreshold) { w.send(document.getElementById("inputMessage").value); } }
WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]); w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值,可以用来描述WebSocket连接的状态。
Constant | Value | Description |
---|---|---|
CONNECTING | 0 | 连接还没开启。 |
OPEN | 1 | 连接已开启并准备好进行通信。 |
CLOSING | 2 | 连接正在关闭的过程中。 |
CLOSED | 3 | 连接已经关闭,或者连接无法建立。 |
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> <p id="message"></p> <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>
热心网友 时间:2022-04-20 04:53
我试过,可以是可以,但websocket会想http协议一样加上许多头部信息,c#端发送和接收过程中都需要处理热心网友 时间:2022-04-20 06:11
答案是肯定的不行