WebSocket 是为了在一个单独的持久连接上提供全双工的双向通信。有关WebSocket API的内容可以参考这里

这里简单说明下WebSocket在javascript中的用法。

1 WebSocket连接简述

在JavaScript中创建了WebSocket 后,会有一个HTTP请求发送到浏览器发起连接。在取得服务器响应后,建立的连接会从HTTP协议交换为WebSocket协议。所以需要后台web服务器也支持WebSocket才能正常通信。

2 WebSocket API

2.1 实例化WebSocket

创建WebSocket,要先实例化一个WebSocket对象,如下:

var socket = new WebSocket('ws://game.example.com:12010/updates');

实例化的时候需要传入要连接的URL以及其他参数。注意到这里URL连接使用的是自定义的协议'ws://'而并非'http://'。如果是加密连接的话,则使用'wss://'。传入的URL也需要是绝对URL。

使用自定义协议的好处

使用自定义协议(ws,wss)而非HTTP协议的好处是,能够在客户端和服务器之间发送非常少量的数据。由于传递的数据包很小,因此WebSocket很适合移动应用。

2.2 WebSocket的readyState属性.

用来表示连接的状态.

CONNECTING (numeric value 0) //正在连接
    The connection has not yet been established.
OPEN (numeric value 1) //已经连接
    The WebSocket connection is established and communication is possible.
CLOSING (numeric value 2)  //正在关闭
    The connection is going through the closing handshake, or the close() method has been invoked.
CLOSED (numeric value 3)  //已关闭
    The connection has been closed or could not be opened.

2.3 发送和接收数据

WebSocket打开之后,就可以通过连接发送和接收数据.使用send()方法向服务器发送数据.

var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.send("this is a demo");

对于有复杂的数据结构的消息(比如dict),发送之前要进行JSON的序列化。

var message = {
time: new Date(),
text: "Hello world!",
clientID: "xxxxx"
};
socket.send(JSON.stringify(message));

当服务器向客户端发来消息时,WebSocket对象会触发message事件。返回的数据保存在event.data中。

socket.onmessage = function(event){
var data = event.data;
//...
}

WebSocket的其他事件。

open: 在成功建立连接时触发。

error: 在发生错误时触发,连接不能持续。

close: 在连接关闭时触发。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZMAAACkCAIAAADddlSXAAARHUlEQVR4nO2doXbbShdG/RKhJYV5hrJk9QXCTEP6BO4bZIUbhhebl5X+q6vrokt60UUll5XqB8f9cnzOzFhyHFvj7L0MaksajUY6WzMjNWcxAAD0xuLcFQAAmAzmAoD+wFwA0B+YCwD6A3N1w+IP564IwPkhDLoBcwEIwqAbMBeAIAy6AXMBCMKgGzAXgCAMugFzAQjCoBswF4AgDLoBcwEIwqAbMBeAKIfB+/fvF3Xev39/4loaHz9+bCxVnU9WH8/j46Pt/cuXL8Mw/Pz507626zyJorl+/Pi9WPyv8Vku/zlWBSbx4cPftUWqc2OdV+XDh7+tAj9+/B6GYb3+ZV8/f/73LPU5Gev1r/X6V3udHz9+n+uamUQf5pIIGutgrpmYy0SAueaGHXXbXJ8//3vGu90k+jDXGCthrjmYa4yVMNfpMSW1zbXZ/Hfefvok9pjrxLWpgbmGfeY6lwUCmGueYK5nFKvfvn3Tj9++fbMfP336pB8/ffpU66/59RXtfjWt4NlbZ99n/PnzZ3GPwtffC+jLly9axx+O4Zc+Pj6ONNfHjx+1VVjkS1D9fd1eYi7Fqv+xeDW/e/dXrb/m11e0+9W0gj7FWvk6+z7ju3d/hTVzgcWDsqkZrZOD0y/dbP4baS6/37BIJSjaQ90aR5HbIbSzToF+8XuxndbWV8X8av6cjmkinY5i9dRcVohvTL8ja9tiox3lpnW4uRScPqqzzooDT9mkKCYf2AeYq7E7rxuP6cbXP/P4+JgPs1ZU0VzF9RtlBssXD3+kucLVZgSdFQee3ibZIyGwp5qrvbscSyEkfCSEj4/txmo1cwVT5GPJZdb6KcW9q3r5jpJ1Vmx2b9IspnCAh5lrufwnOzTXeeRZKK5QbLGRHDLPJStZD8IHmG2oX7LIQjx7MUkN+kXGmTRaVOHq66lkW0crSGSSr9eH1Vk11EH5vqHV0B9FzVyqjG2Sve93HfqJoVn8j3vnudzmO/GQIyRckYpeBYkPIbsotY6MM2m06AtXkFjJWkcrKLQUdT5mQg11ULKSauiPomYuq4w2yd7XrnM/0ZM3rJWsIFf1QjvoiNQOMriaTsVqnXzuJo0WQ2WK9clnIbd5qHOtszmJF5lLkR+CvGaKwcVniHmvPwV57rg1jiSPsIpDV0/2i6rnNwl711H7XpjqXDNXLlabNHbteaG5dPXY11qE+Ju5XZQ55v0FF27LU82lH/eGVvaLYkab5L3rqP39X3UumksBnAfRKjbvukhowKGkqtCkQW1qFnkqn6kg/aHpoEnmanQAc7ex2M+1aufLJlyNB/Aicw27ARms5PsmtULa82KHmUu/tM3ljzGbS+PHXHKu3uB0VjRXY1Cs5tKuvRA9Wt//ON5cISBDUPl5q1oh7XmxUJ+pM/SN0ArHmM2Vo1olF8c7oQsQzNUYFKu5iuGaaTSpDtPHcLZSYywWZFc81y8011AZG3oX751CLQ699cnTYSN56bNF33EIPay2uSzCT2yuWpXOay4rp7hrj9b3P056TqeOQ46Qtrns8jqxuWpVOqO5Fmlypx14jXLynNp6/Sv3sBrmahzjEc3lB7yNjvnB5mqrv9W2xV/Hm8uPEEPgjXkz4MTmCqpqjBZfyVy1kWBt156Xm0vXU46QMW8GnNJc/nK3KjVGi69krkaQTzJXey5MldSMePFRQGNHr2quwY318mVTq2HRXMd92eII73OFHkQup/Hm6inNleenDjPXS+a5GhI/gbnC3c9vMmbS9JTmyvNTh5nrJfNcDYmPNFexP5IJz/V88+Z5pcxrm0vVs8MJZ7Y45Vec5zru63uHzHMtdh9++de1Qp8iz90EC5zFXNKH3q6aZK4hPf30L1vsfbaoku1rfg57mLlqn3DD9w/Iw0Uc5m6yBc5iLulD1Z5krvz002ui/WxRK+SQHmkuldzeMNxRim2V5+zD88rXM1eoXu2yWaRni/n+oW2LF+ckjmCu/E7A3qK02khzeTkuKv6aNFoMtPWRSz7i+1w6xtOYK78TsLcorTbGXMOuHNvvc40cLYZPwwLFko/1Ppc/xpHmqu099+bUaLnFivNufrUx5mrbRxTbedg9p2MOMDdOcYWDJ7mGo5hr2NcnCt4pWq9trlCl4utOI58thpqE56EjzTUc4x36UOBpzLW3T+Sv0Zr12uZqvxZfq0Mu3AeblRMebI0013CMd+hrQ6Qxj8aCeorh2u4TBe+Eeo4xV6hGbSDsd1Q8O3kywTdF7n8V16ytMIm5/M9E2EvRXAAnoCHWSRI/IoRBN2AuOBdjelKYC8oUzdUeKvLhM//PgeFwjJiCU4C5+Fzk58BwOEZMwSlgtAggCINuwFwAgjDoBswFIAiDbsBcAIIw6AbMBSC2YbAAADg3mAsA+gNzAUB/TDYXzJ8Dzi7ApUIYdAPmAhCEQTdgLgBBGHQD5gIQhEE3YC4AQRh0A+YCEIRBN2AuAEEYdAPmAhCEQTdgLgBBGHQD5gIQhEE3YC4AUQ+Dh+Vwu9h+VjfPv9sv99fD/fX23w/LuK02vF0M378OwzBs1tuvd1c7JW/WOxveXT0v8sWO2eml0zLX6ua53Z5W2x+fVttGU+P7pXlDf5btHK1utoVYOQCzoWIuE4RJZxi2xhFeOt+/7sSDBYliwAJAS01MKsovtXJu/9THvvpoaez0bVA11/31jsf91+9fh7urnXPnlz4sdzZ8WO40+GY93F09/7K6eYN3C5gtJXPZbdb3hsxHunCzU6Qqf60bJkEt9UL0S+3m7xeFajR2+jYom2uzLghFDWWKry3N3aiH5XODm7n8jt5Yg8OcKZnLukJeIsOuKbJE9DULxZcW7v9+qYaB4aOOVWOnb4OyuZ5WZXNZg1vD1pa2GzyoCnPBnBjX57Jbd6PPpa+5z2WdKS0NXQAt9asVwVyH9bnCrWJo9rlCyZgL5kpFFkEx4WtDImY9xVL4auUUVzY5+jAzl9Hn+kNrniuMsv08V2govzTLyKbki0sxF8yJejfHP3XKM+WyTPg6uLn2/PTQRosjny2G8Wl7p2+A1rNF32j+ZNloUc8Hs+79ufD3GP1u66uEt9TgMGdO+3JQnueC0RzyPldxngugfzBXN2AuAHEqc/mXIf17WzCayeZqDBIBOgeDdAP/+wdAEAbdgLkABGHQDZgLQBAG3YC5AARh0A2YC0AQBt2AuQDENgwWAADnZrK5YP4ccHYBLhXCoBswF4AgDLoBcwEIwqAbMBeAIAy6AXMBCMKgGzAXgCAMugFzAQjCoBswF4AgDLoBcwEIwqAbMBeAIAy6AXMBiHoY+KwwPl2V/jqwcrv6tGPt5KNDPaVQXpozzdQyA+39U9E+Da2Oy+flzslv5kfBXHZcarThz7H4o/B/07mYBMCfjrCCb9jVzc758pdHLtZfDJbz0ed58meZTGhwEBVzWUgoi1+4On3CMbtGfVZEW9NKsDymUkm4gkMax5AsdnWzs9OQg/buqnrRhwj0e1Eo+sprac5OOCfKfS41rx2aHZcOf7PeORxbx3N39XyWzXEiZJkN5vLp5kKx1owi3EseljtifVjOtsFhzozLcW2XZiPHtU+MaKtZp2z4E1rfv26L9f2vkDrb94x86lOVPDLln/ZYPBZbar+YK0Oa1duUBXIeVM1lTerT/Ch37OomtmTIid1IZRKs1yY4LjTg7W4/MfCwnGeDw5wpXbg+8kXQUy3dtML+/nobISotJCVtDEWLi/KQ0EvQW8+7Lx+Ld1PeKpc8Gw4xV/EAG60aTnpjSOgHoaFXFXJuD0Ohw95Dg8OcGdfnCp2jtrmM++ttCaHPNf7u6od1AcWbYeNBRUvuc+WJNt/n6oTj9LnajOyCPa1i1+klfS6A6VSu1DADFb42zJX/4T0SFGNaySPNvKGfxFH5ipbb0my99rJ3nitE3Vy7AIeYaxgKfSW1lf+3cbs7z+jbwZsrzFWFG0BIT2v9Pl9O2GnYEcAI6vfY2kPAMHzIPX9bWderRhy+m1Mcg+SiRB4q+ir5J1k2Sg3Dojxo8hKsPbKcGdVni2Z8b2E9HhlS0/l2e1rFY/cdNHtCUhsthse14dmLH0vaXjxh3mDGz3NhtnQzVjoaxVm8Huj4fa69D1UAJtJhGLwQPfTsjV7NNekZJcA4eguDw/Cjnm6jqCdz+fE7HS54BXoIAxiGoS9zAbwyhEE3YC4AQRh0A+YCEIRBN2AuAEEYdAPmAhCEQTdgLgCxDYMFAMC5mWwumD8HnF2AS4Uw6AbMBSAIg27AXACCMOgGzAUgCINuwFwAgjDoBswFIAiDbsBcAIIw6AbMBSAIg27AXACCMOgGzAUgCINuwFwAoh4GPkFLTuZqf829mLsl5BD1+E30b5+1TIl5fOaYvHn4XVX1iX8u7o8IV83l/3RyTg4SkgMVM7xt1s9nzTesP5UhJZKdC/vT2PbHsi+uwWHOVMxl16VioJhezKcs1OVuScnkMp+W1VD82EVvwRMyMKoES4eV62BbhVjSH5vX+peVxa9qrnB7uE3pdZWdTHm/PZadTG2rpXZ3EeHrMAzfv26LtXberCekAQZ4GeNyXJspGjmuTSJmpSyUnBuxlsbCdp0T8OVk1Na3ymkTL5eyuZ5WBUGH5s0pqT2rm3LGw7zJw7JwEwI4B6Urr5iRMAzrijmucz7XPHCzy72WHDRL0/AZrQ3blw/aoMiLo2yukHW1OFJ+WrWysa5uCg0e8lRrX77Bi+sAnIRxfa6gm5q52lYqFrV310buc+U136a5in2uwAHmGsb1uS66wWHOVHr7YeQVvtbMNfxRjGLJp4z3v0w1VxhjFoecb9NcwzDcX+90kG36yXOYufb2sDAXnI/6PIU5KGdXDUOSPEIJzxY18AyPwMLDx7xV0U1a5EPR/67Pxc0Wt96KKDbpUGpVLzV/ihsPEHOxxVMZphcAXhNmWLuB97kABGHQDZgLQBAG3YC5AARh0A2YC0AQBt2AuQAEYdANmAtAEAbdgLkABGHQDZgLQBAG3YC5AMQ2DBYAAOdmsrlg/hxwdgEuFcKgGzAXgCAMugFzAQjCoBswF4AgDLoBcwEIwqAbMBeAIAy6AXMBCMKgGzAXgDhtGDQyj8I+DjSX/mQzDQ4XxJlu4ATSdF7U59qsaXC4JDBXN2AuAFEPA5+C1F/0ysqjxDA5I1ZICZMzIdfMVdupEXL8+BVCkptLpGUuf/gPy5i1bKiby2fxKW7lWzvnKifxD5yJSpCblXQ5hsvapwWzKzgkWMxZzhoZs0fuNKRTvLt6LsGmciRQ+/p2spY9LHdaJmfVHSrmMjHVvoa8jcFcYReX2OAwZ8bluLZrupHjWlFh9vFYNyqQzTVmp8WugbkylHaJWWOr5sp9pUzRXLmJNuvnBt+sq21YTKx9cQ0Oc6ZkLnNNo5eUzaWvI5WRXbN3p37kYh8Lnvx7bezTOWVzjUw0XTTX3kGlH7z7lf3vl9vgMGfG9bmsX9Poc+nr/XXhCr67ikOJMX2usFOPbNVe7bI4dZ8rL9L6xT4XwAmpzHPZXHjta8Nc5hQfJMVZp8YEfPGrFesL8Yq0XYS5tovrArTmuXxj2uGHBq/Nc+VRtljd7OgpDB7vr3c6yGFSDOCVqT+G0xuMxRl3qSEPFsJTpzDpnj95djn/noeEob8Qni1e4tOu1rPFMHwTxaF0bTwYfLe62XmYm8UUigU4IVxw3cD//gEQhEE3YC4AQRh0A+YCEIRBN2AuAEEYdAPmAhCEQTdgLgBBGHQD5gIQhEE3YC4AQRh0A+YCENswWAAAnBvMBQD9gbkAoD8mmwsAoCMwFwD0B+YCgP7AXADQH5gLAPoDcwFAf2AuAOgPzAUA/YG5AKA//g/mp3Y2PhbIxAAAAABJRU5ErkJggg==" alt="" />

2.4 关闭WebSocket连接

使用close()方法可以关闭WebSocket连接。

socket.close()

调用之后readyState指变为2,连接关闭后变为3.

最新文章

  1. js---OOP浅谈
  2. 读《编写可维护的JavaScript》第七章总结
  3. iOS AFNetworking 打印从服务器返回的错误提示信息
  4. 作业成绩 final 20161124-1201 09:00
  5. AFN 2.6 code报错总结
  6. Django中的syncdb命令
  7. magento -- 给后台分类管理页的分类商品加一栏商品类型
  8. sqlserver快照,启用基于行版本控制的隔离级别
  9. 如何让你的eclipse运行更快和eclipse常用快捷键
  10. Redis服务器启动之后3个警告信息的解决方案
  11. 浅谈《Linux就该这么学》
  12. 如何配置nginx负载均衡配置(轮询,权重,ip绑定)
  13. mark 三年工作总结
  14. 斯坦福大学自然语言处理第四课“语言模型(Language Modeling)”
  15. Oracle 数据库实现数据合并:merge
  16. PAT 1085 PAT单位排行(25)(映射、集合训练)
  17. Golang 接口interface
  18. MySQL学习笔记:limit
  19. XAMPP设置tomcat自启动时,报无效的Win32程序
  20. 洛谷 P2639 [USACO09OCT]Bessie的体重问题Bessie's We… 题解

热门文章

  1. Win32SDK应用程序
  2. Java 基础 - 如何重写equals()
  3. Maven - 深入理解maven构建生命周期和各种plugin插件
  4. [JZOJ1904] 【2010集训队出题】拯救Protoss的故乡
  5. CommonsMultipartResolver 文件上传
  6. oracle 删除掉重复数据只保留一条
  7. H2数据库的基本使用
  8. 根据Cron表达式,通过Spring自带的CronSequenceGenerator类获取下次执行时间
  9. deployment资源
  10. Python - Virtualenv 创建虚拟环境