严格地说，WebSocket技术不属于HTML5，这个技术是对HTTP无状态连接的一种革新，本质就是一种持久性socket连接，在浏览器客户端通过javascript进行初始化连接后，就可以监听相关的事件和调用socket方法来对服务器的消息进行读写操作。与Ajax相比，Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信，这个特性导致我们至少可以用来做远控。

WebSocket实现了全双工通信，使WEB上的真正的实时通信成为可能。浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在WebSocket协议中，为我们实现即时服务带来了三个好处：

  1. 客户端和服务器端之间数据传输时请求头信息比较小,大概2个字节。
  2. 服务器和客户端可以相互主动的发送数据给对方。
  3. 不需要多次创建TCP请求和销毁，节约宽带和服务器的资源。

WebSocket的官方地址是：www.websocket.org，其中给出了一些样例，可以直接在线测试。

对于WebSocket，目前浏览器支持情况如下:
Chrome
Supported in version 4+
Firefox
Supported in version 4+
Internet Explorer
Supported in version 10+
Opera
Supported in version 10+
Safari
Supported in version 5+

服务器支持情况如下：

服务器名称 下载网址
Tomcat服务器 http://tomcat.apache.org
Php服务器 http://code.google.com/p/phpwebsocket
Node服务器 http://nodejs.org
Ruby服务器 http://github.com/gimite/web-socket-ruby
Jetty服务器 http://jetty.codehaus.org/jetty/
Netty服务器 http://www.jboss.org/netty
Kaazing服务器 http://www.kaazizng.org/confluence/KAAZING/Home

这里选择Node服务器，创建WebSocket Node.js应用程序事实上的标准库Socket.IO。node.js提供了高效的服务端运行环境，socket.io基于node.js并简化了WebSocket API，统一了通信的API，统一了服务端与客户端的编程方式。

与很多其他的Node.js库相似，Socket.IO也是一个NPM模块，可以按如下方式进行安装：

$ npm install socket.io

下面是一个基于Socket.IO的WebSocket聊天应用程序

Node.js服务器端代码server.js:

  1. var io = require('socket.io').listen(4000);
  2. io.sockets.on('connection', function (socket) {
  3.   socket.on('clientMessage', function(content) {
  4.     socket.emit('serverMessage', 'You said: ' + content);
  5.     socket.broadcast.emit('serverMessage', socket.id + ' said: ' +
  6.       content);
  7.   });
  8. });

客户端代码client.html：

  1. <html>
  2.   <head>
  3.     <title>Node.js WebSocket chat</title>
  4.     <style type="text/css">
  5.       #input {
  6.         width: 200px;
  7.       }
  8.       #messages {
  9.         position: fixed;
  10.         top: 40px;
  11.         bottom: 8px;
  12.         left: 8px;
  13.         right: 8px;
  14.         border: 1px solid #EEEEEE;
  15.         padding: 8px;
  16.       }
  17.     </style>
  18.   </head>
  19.  
  20.   <body>
  21.  
  22.     Your message:
  23.     <input type="text" id="input">
  24.  
  25.     <div id="messages"></div>
  26.  
  27.     <script src="http://localhost:4000/socket.io/socket.io.js"></script>
  28.     <script type="text/javascript">
  29.       var messagesElement = document.getElementById('messages');
  30.       var lastMessageElement = null;
  31.  
  32.       function addMessage(message) {
  33.         var newMessageElement = document.createElement('div');
  34.         var newMessageText = document.createTextNode(message);
  35.  
  36.         newMessageElement.appendChild(newMessageText);
  37.         messagesElement.insertBefore(newMessageElement,
  38.           lastMessageElement);
  39.         lastMessageElement = newMessageElement;
  40.       }
  41.  
  42.       var socket = io.connect('http://localhost:4000');
  43.       socket.on('serverMessage', function(content) {
  44.         addMessage(content);
  45.       });
  46.  
  47.       var inputElement = document.getElementById('input');
  48.  
  49.       inputElement.onkeydown = function(keyboardEvent) {
  50.         if (keyboardEvent.keyCode === 13) {
  51.           socket.emit('clientMessage', inputElement.value);
  52.           inputElement.value = '';
  53.           return false;
  54.         } else {
  55.           return true;
  56.         }
  57.       };
  58.     </script>
  59.  
  60.   </body>
  61. </html>

跨域（二）——WebSocket的更多相关文章

  1. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  2. 解决前后端调用，跨域二次请求Access-Control-Max-Age

    发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...

  3. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...

  4. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  5. rest_framework 跨域和CORS

      跨域和CORS   本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定, ...

  6. SpringBoot配置Cors解决跨域请求问题

    一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...

  7. Zuul 跨域

    JS访问会出现跨域问题的解决, 一.对单个接口,处理跨域,只需要在被调用的类或或方法增加注解 CoossOrigin 如下设置 allowCredenticals=true,表示运行Cookie跨域 ...

  8. day 92 跨域和CORS

      跨域和CORS   本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定, ...

  9. AJAX跨域问题解决方法（4）——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  10. spring boot跨域请求访问配置以及spring security中配置失效的原理解析

    一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...

随机推荐

  1. 1121 Damn Single （25 分）

    1121 Damn Single (25 分) "Damn Single (单身狗)" is the Chinese nickname for someone who is bei ...

  2. base_基础

    目录 A B C D E F G H I J K L M N S: Sqlite: 1;orhanobut/hawk; A: Adapter: 图片处理 Android中自定义布局中加载图片Bitma ...

  3. [UE4]透明按钮

    Background Color的透明度设置为0,就能让按钮背景完全透明,但是按钮里面的子控件并不会跟着透明

  4. keepalived主备节点都配置vip，vip切换异常案例分析

    原文地址:http://blog.51cto.com/13599730/2161622 参考地址:https://blog.csdn.net/qq_14940627/article/details/7 ...

  5. C，Java，C#数据类型对比总结

  6. Java - 26 Java 数据结构

    Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) ...

  7. Java平台编写运行Ruby和Python

    Java不仅是一门编程语言,还是一个平台,通过JRuby和Jython,我们可以在Java平台上编写和运行Ruby和Python程序.

  8. 将mysql数据库数据以Excel文件的形式导出

    最近在工作中,领导让从数据库中导出一些数据并存放到Excel表格中,网上有许多教程,下面是我总结的其中俩种方法. 从数据库管理工具中导出(navicat) 在navicat导出数据导Excel中还是比 ...

  9. docekr－image的区别和container;docker run和start,create

    copy by: https://www.simapple.com/326.html 容器(container)的定义和镜像(image)几乎一模一样,也是一堆层的统一视角,唯一区别在于容器的最上面那 ...

  10. SVN提交报错（SVN的bug）

    提交的时候报错: Failed to execute WebDAV PROPPATCHsvn: Commit failed (details follow):svn: At least one pro ...