WebSocket Protocol Handshake

要建立一个websocket 连接,客户端要先发送一个websocket 的握手请求,然后服务器收到请求后再返回一个响应,如下所示:

client

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

server

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
握手的过程很像HTTP,实际上却不是。它允许server 把client 的握手请求当成是HTTP 请求,
但是之后就切换成websocket.

websocket-lifecycle 有一点要注意的是,每行都要用EOL 结尾(end of line),\n 或者 \r\n.最后一行之后必须再跟个空行, 例如:Sec-WebSocket-Protocol:chat \r\n\r\n client 发送一个用base64 编码的Sec-WebSocket-Key。server 响应握手的时候,在 Sec-WebSocket-Key的后面拼接一个魔法字符串 258EAFA5-E914-47DA-95CA-C5AB0DC85B11  (这个字符串就是普通的字符串没经过编码的),拼接后的字符串用SHA-1 散列后再用base64编码, 最后这个编码后的结果字符串被当成header里的Sec-WebScoket-Accept的值被返回。 Sec-WebSocket-Key –> Sec-WebSocket-Accept 的转变过程如下:

  • x3JJHMbDL1EzLkh9GBhXDw==258EAFA5-E914-47DA-95CA-C5AB0DC85B11 string hashed by SHA-1 gives 0x1d29ab734b0c9585240069a6e4e3e91b61da1969 hexadecimal value.
  • Encoding the SHA-1 hash by Base64 yields HSmrc0sMlYUkAGmm5OPpG2HaGWk=, which is the Sec-WebSocket-Accept value.
一旦握手成功,连接建立,client 和 server 就可以相互发送websocket 数据帧了并且是全双工的模式,
它们之间是可以实时全双工的方式发送帧,传送的也是最小限度构建的数据。

点击button会提交表单的问题

在一个表单里,如果有一个以上”submit”类型的<button>标签存在,在表单被提交时,不管你点击哪个<button>,所有<button>的值都会被post/get。

由于根据w3c标准<button>默认的type为submit,也就是说如果button没有声明type的话,那此button就是相当于一个submit,所以如果此button是在一个表单里的话,点击它就会提交表单。

在button中添加type=”button”可以解决这个问题,<button type=”button” >

不过根据网友的建议,以后最好使用<input type=”button”/>

ul li 下拉菜单被flash挡住的解决办法之一

最近在为公司设计中文网站(基于wordpress)的时候发现用ul li 的下拉菜单会被 菜单下方的flash

(在page中使用fck editor编辑器添加的flash)挡住,出现在chrome中(FF和IE都是正常的),

后来请教了谷哥和度娘得一法,记录下来。

添加wmode=”opaque”到<embed>中,实例如下:

<p style=”text-align: center;”><object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″ height=”303″ width=”900″><param name=”quality” value=”high” /><param name=”wmode” value=”transparent” /><param name=”movie” value=”http://localhost/cellphonezone/wp-content/uploads/12312313213213(0).swf” /><embed height=”303″ pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” src=”http://localhost/cellphonezone/wp-content/uploads/12312313213213(0).swf” type=”application/x-shockwave-flash” width=”900″ wmode=”opaque”></embed></object></p>