html5利用websocket完成的推送功能

Posted 2021-12-01 mica

程序简单来说，就是客户A可以发送消息给客户B，但有很多可以扩展的地方，

比如

1.如果加入数据库后，A发消息时客户B未上线，服务端将会把消息存在数据库中，等客户B上线后，在将消息取出发送给客户B

2.服务端也可发送消息到任意客户端上。

Websocket

1.websocket是什么？

WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，

此后服务端与客户端通过此TCP连接进行实时通信。

2.websocket的优点

以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器发送请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。会占用大量的带宽和服务器资源。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。在建立连接之后，服务器可以主动传送数据给客户端。

此外，服务器与客户端之间交换的标头信息很小。

WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；

关于ajax,comet,websocket的详细介绍，和websocket报文的介绍，大家可以参看http://www.shaoqun.com/a/54588.aspx 网页设计]Ajax、Comet与Websocket，

如果以后有时间，也会写出来的

3.如何使用websocket

客户端

在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应

一个简单是示例

var ws = new WebSocket(“ws://localhost:8080”);
ws.onopen = function()
{
  console.log(“open”);
  ws.send(“hello”);
};
ws.onmessage = function(evt)
{
  console.log(evt.data)
};
ws.onclose = function(evt)
{
  console.log(“WebSocketClosed!”);
};
ws.onerror = function(evt)
{
  console.log(“WebSocketError!”);
};

1.var ws = new WebSocket(“ws://localhost:8080”);

申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

ws.send(“hello”);

用于叫消息发送到服务端

2.ws.onopen = function() { console.log(“open”)};

当websocket创建成功时，即会触发onopen事件

3.ws.onmessage = function(evt) { console.log(evt.data) };

当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据

4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); };

当客户端收到服务端发送的关闭连接的请求时，触发onclose事件

5.ws.onerror = function(evt) { console.log(“WebSocketError!”); };

如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件

我们可以看出所有的操作都是采用事件的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。