js中的web sockets

为了实现在单独的持久连接上提供全双工、双向通信的功能,HTML5中增加了连接API-WebSockets。在JavaScript中创建了WebSocket之后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级,从HTTP协议转变为web socket协议。具体的过程如下:
(1)客户端建立连接时,通过HTTP发起请求报文,如下所示

Upgrade:websocket
Connection:Upgrade
Sec-WebSocket-Key:
Sec-WebSocket-Protocol:

这两个字段表示请求服务器端升级协议为WebSocket,Sec-W
(2)服务器端处理完请求之后,响应如下报文

Upgrade:websocket
Connection:Upgrade
Sec-WebSocket-Accept:
Sec-WebSocket-Protocol:

该报文告知客户端正在更换协议,更新应用层协议为WebSocket协议。

web sockets API

要创建Web Socket,先实例一个webSocket对象并传入要连接的URL

var socket = new WebSocket('ws:www.example.com/server.php');

在这里需要注意,必须给WebSocket传入绝对URL。同源策略对Web Sockets不适用,因此可以通过它打开任何站点的连接。所以是否跟某个域中的页面通信,完全取决于服务器
实例化了WebSocket对象后,浏览器会马上尝试创建连接。WebSocket有一个表示当前状态的readyState属性。

发送和接收数据

Web Socket打开之后,就可以通过连接发送和接收数据。要向服务器发送数据,使用send()方法,并传入任意字符串。如

var socket = new WebSocket('ws:www.example.com/server.php');
socket.send('hello world');

在这里需要注意:因为WebSockets只能通过连接发送纯文本数据,所以对于复杂的数据结构,在通过连接发送之前,必须进行序列化。
当服务器向客户端发来消息时,WebSocket对象就会触发message事件。这个message事件与其他传递消息的协议类似,也是把返回的数据保存在event.data属性中

socket.onmessage = function(e){
    var data = e.data;
    //处理数据
};

值得一提的是data的数据格式也是字符串,如果想得到其他格式的数据,必须手工解析这些数据。

其他事件

WebSocket对象还有其他三个事件,在连接声明周期的不同阶段触发

利用socket.io实现简易聊天室

实现聊天室的主要过程如下

socket.io中emit的几种方式
socket.emit(‘message’,data)信息传输对象为当前socket对应的client,各个client socket相互不影响

socket.broadcast.emit信息传输对象为所有client,排除当前socket对应的client

io.socket.emit信息传输的对象为所有的client

其完整代码参见github:https://github.com/charlene0824/chat