首页 > 科技 > WebSocket的基本使用

WebSocket的基本使用


第一部分 介绍

HTTP的缺点在于通信只能由客户端发起,如果服务器有连续的状态变化,客户端要获知就非常的麻烦,只能够使用轮训的方法,很消耗服务器资源。

WebSocket很好的解决了HTTP的这个缺点,它的特点是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,属于服务器推送技术的一种。

特点有 :

  • 数据格式轻量,性能开销小,通信高校。
  • 可以发送文本或二进制数据。
  • 没有同源限制,客户端可以与任意服务器通讯。
  • 协议标识是ws,如果加密就是wss,服务器网址就是url。
  • 默认端口也是80和443,握手阶段采用HTTP协议,能通过各种HTTP代理服务器。
ws://example.com:80/some/path

第二部分 客户端示例

var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) {   console.log("Connection open ...");   ws.send("Hello WebSockets!");};ws.onmessage = function(evt) {  console.log( "Received Message: " + evt.data);  ws.close();};ws.onclose = function(evt) {  console.log("Connection closed.");};

第三部分 客户端API


  1. WebSocket构造函数var ws = new WebSocket('ws://localhost:8080');

2.WebSocket.readyState 返回示例对象的当前状态,有四种

CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

3.WebSocket.onopen 实例对象的onopen属性,用于指定连接成功后的回调函数

ws.onopen = function () {  ws.send('Hello Server!');}

WebSocket.onclose 实例对象的onclose属性,用于指定连接关闭后的回调函数

ws.onclose = function(event) {  var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;  // handle close event};ws.addEventListener("close", function(event) {  var code = event.code;  var reason = event.reason;  var wasClean = event.wasClean;  // handle close event});

5.WebSocket.onmessage 实例对象的onmessage属性,用于指定收到服务器数据后的回调函数

注意,服务器数据可能是文本也可能是二进制,要不同处理

ws.onmessage = function(event){  if(typeof event.data === String) {    console.log("Received data string");  }  if(event.data instanceof ArrayBuffer){    var buffer = event.data;    console.log("Received arraybuffer");  }}

6.WebSocket.send() 实例对象的send方法用于向服务器发送数据

ws.send('your message');

7.WebSocket.bufferedAmount 实例对象的bufferedAmount属性,表示还有多少字节的二进制数据没有发送出去,常用语判断发送是否结束

var data = new ArrayBuffer(10000000);socket.send(data);if (socket.bufferedAmount === 0) {  // 发送完毕} else {  // 发送还没结束}

8.WebSocket.onerror 实例对象onerror属性,用于指定报错时的回调函数

socket.onerror = function(event) {  // handle error event};socket.addEventListener("error", function(event) {  // handle error event});

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.souzhinan.com/kj/281440.html