WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得推广客户端和服务器之间的数据交换变得愈加简单,允许服务端主动向推广客户端推送数据。在 WebSocket API 中,浏览器和服务器仅需完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器仅需做一个握手的动作,然后,浏览器和服务器之间就形成了一条迅速通道。两者之间就直接可以数据互相传送。
目前,不少网站为了达成推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每 1 秒),由浏览器对服务器发出 HTTP 请求,然后由服务器返回最新的数据给推广客户端的浏览器。
这种传统的模式带来非常明显的缺点,即浏览器需要持续的向服务器发出请求,然而 HTTP 请求可能包括较长的头部,其中真的有效的数据可能只不过非常小的一部分,显然如此会浪费不少的带宽等资源。
HTML5 概念的 WebSocket 协议,能更好的节省服务器资源和带宽,并且可以更实时地进行通讯。

浏览器通过 Javascript 向服务器发出打造 WebSocket 连接的请求,连接打造将来,推广客户端和服务器端就能通过 TCP 连接直接交换数据。
当你获得 Web Socket 连接后,你可以通过 send() 办法来向服务器发送数据,并通过 onmessage 事件来接收伏务器返回的数据。
WebSocket 实例WebSocket 协议本质上是一个基于 TCP 的协议。
为了打造一个 WebSocket 连接,推广客户端浏览器第一要向服务器发起一个 HTTP 请求,这个请求和一般的 HTTP 请求不同,包括了一些附加头信息,其中附加头信息Upgrade: WebSocket表明这是一个申请协议升级的 HTTP 请求,服务器端分析这类附加的头信息然后产生应答信息返回给推广客户端,推广客户端和服务器端的 WebSocket 连接就打造起来了,双方就能通过这个连接通道自由的传递信息,并且这个连接会持续存在直到推广客户端或者服务器端的某一方主动的关闭连接
!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title新手课程(runoob.com)/titlescripttype=text/javascriptfunctionWebSocketTest(){if(WebSocketinwindow){alert(你的浏览器支持WebSocket!)//打开一个websocketvarws=newWebSocket(ws://localhost:9998/echo)ws.onopen=function(){//WebSocket已连接上,用send()办法发送数据ws.send(发送数据)alert(数据发送中...)}ws.onmessage=function(evt){varreceived_msg=evt.dataalert(数据已接收...)}ws.onclose=function(){//关闭websocketalert(连接已关闭...)}}else{//浏览器不支持WebSocketalert(你的浏览器不支持WebSocket!)}}/script/headbodydivid=sseahref=javascript:WebSocketTest()rel=externalnofollow运行WebSocket/a/div/body/htmlsocket.io 介绍
socket.io 是一个类库,内部封装了 WebSocket,可以在浏览器与服务器之间打造实时通信。
假如某些旧版本的浏览器不支持 WebSocket,socket.io 会用轮询代替。另外它还具备可发送二进制消息、多路复用、创建房间等特质,因此相比直接用原生 WebSocket,socket.io 是更好的选择。
开发一个实时应用主要分两部分:服务端和推广客户端,socket.io 分别提供了相应的 npm 包供大家便捷地调用。
下面就通过一个生动形象且有趣的栗子分别介绍这两大块。
目前假设李白张三,李四,王五 3 个人加入了一个叫 棋牌室 的房间,在文章结束时大家将拥有一个麻雀虽小五脏俱全的峡谷英雄在线聊天室。
推广客户端 apinpmisocket.io-client//安装socket.io为推广客户端提供的npm包
下面就能在页面上打造到服务器的连接了
importiofromsocket.io-clientconstsocket=io(http://127.0.0.1:3001)//打造连接
向服务器发送消息
constsocket=io(http://127.0.0.1:3001)socket.emit(talk,打快点啊,天都要黑了)
接收伏务器发来的信息
constsocket=io(http://127.0.0.1:3001)socket.on(talk,(data)={console.log(data)//打印data})
李白看到了瑶的消息,强忍住问候他们家人的冲动,像哄那什么似地说道:
constsocket=io(http://127.0.0.1:3001)socket.on(talk,(data)={socket.emit(talk,你这么敢干什么!)})
推广客户端的功能到这基本上也开发完了。
核心 api 就是 on 和 emit 用于收发消息,既简单又高雅。





