跨域（二）——WebSocket
严格地说，WebSocket技术不属于HTML5，这个技术是对HTTP无状态连接的一种革新，本质就是一种持久性socket连接，在浏览器客户端通过javascript进行初始化连接后，就可以监听相关的事件和调用socket方法来对服务器的消息进行读写操作。与Ajax相比，Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信，这个特性导致我们至少可以用来做远控。
WebSocket实现了全双工通信，使WEB上的真正的实时通信成为可能。浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在WebSocket协议中，为我们实现即时服务带来了三个好处：
- 客户端和服务器端之间数据传输时请求头信息比较小,大概2个字节。
- 服务器和客户端可以相互主动的发送数据给对方。
- 不需要多次创建TCP请求和销毁，节约宽带和服务器的资源。
WebSocket的官方地址是：www.websocket.org，其中给出了一些样例，可以直接在线测试。
|
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:
var io = require('socket.io').listen(4000);
io.sockets.on('connection', function (socket) {
socket.on('clientMessage', function(content) {
socket.emit('serverMessage', 'You said: ' + content);
socket.broadcast.emit('serverMessage', socket.id + ' said: ' +
content);
});
});
客户端代码client.html：
<html>
<head>
<title>Node.js WebSocket chat</title>
<style type="text/css">
#input {
width: 200px;
}
#messages {
position: fixed;
top: 40px;
bottom: 8px;
left: 8px;
right: 8px;
border: 1px solid #EEEEEE;
padding: 8px;
}
</style>
</head> <body> Your message:
<input type="text" id="input"> <div id="messages"></div> <script src="http://localhost:4000/socket.io/socket.io.js"></script>
<script type="text/javascript">
var messagesElement = document.getElementById('messages');
var lastMessageElement = null; function addMessage(message) {
var newMessageElement = document.createElement('div');
var newMessageText = document.createTextNode(message); newMessageElement.appendChild(newMessageText);
messagesElement.insertBefore(newMessageElement,
lastMessageElement);
lastMessageElement = newMessageElement;
} var socket = io.connect('http://localhost:4000');
socket.on('serverMessage', function(content) {
addMessage(content);
}); var inputElement = document.getElementById('input'); inputElement.onkeydown = function(keyboardEvent) {
if (keyboardEvent.keyCode === 13) {
socket.emit('clientMessage', inputElement.value);
inputElement.value = '';
return false;
} else {
return true;
}
};
</script> </body>
</html>
跨域（二）——WebSocket的更多相关文章
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- 解决前后端调用，跨域二次请求Access-Control-Max-Age
发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...
- http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理
这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...
- ajax处理跨域有几种方式
一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...
- rest_framework 跨域和CORS
跨域和CORS 本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定, ...
- SpringBoot配置Cors解决跨域请求问题
一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...
- Zuul 跨域
JS访问会出现跨域问题的解决, 一.对单个接口,处理跨域,只需要在被调用的类或或方法增加注解 CoossOrigin 如下设置 allowCredenticals=true,表示运行Cookie跨域 ...
- day 92 跨域和CORS
跨域和CORS 本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定, ...
- AJAX跨域问题解决方法（4）——调用方解决跨域
调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...
- spring boot跨域请求访问配置以及spring security中配置失效的原理解析
一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...
随机推荐
- docker拉取oracle11g镜像配置
开始拉取oracle11g镜像 下载过程稍长,镜像大小6.8G(之前拉取过了,所以就不截图了) #docker pull registry.cn-hangzhou.aliyuncs.com/helow ...
- ArcGIS for android访问天地图
底图采用Web Mercator投影坐标系 获取元数据信息:http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetCapabili ...
- C# 知识特性 Attribute,XMLSerialize,
C#知识--获取特性 Attribute 特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类型.方法.属性等)相关联.特性与程序实体关联后,可在运行时使用“反射”查询特性,获取特性集合方 ...
- LEGB
找寻变量的调用顺序采用LEGB原则(即就近原则) B —— Builtin(Python):Python内置模块的命名空间 (内建作用域) (内置命名空间) G —— Global(module): ...
- String，StringBuilder和StringBuffer区别
String字符串常量 StringBuilder 字符串变量(非线程安全) StringBuffer 字符串变量(线程安全) 1.String String是字符串常量,为不可改变对象 Strin ...
- PHP微信公众号开发之基本配置
(提示:需要有服务器或云虚拟机) 一开始不明白公众号不是可以这样管理吗? 那么为什么用开发平台进行公众号开发,官方文档是这样说的 为了识别用户,每个用户针对每个公众号会产 ...
- sublime 格式化react插件配置教程 jsfmt配置
1.下载如下插件: https://github.com/ionutvmi/sublime-jsfmt#installation 这个插件是jsfmt,可以直接在package里搜索到: 2.user ...
- Solr——Windows下部署Solr7.5.0至jetty、Tomcat
Solr6用默认的Jetty启动 需要的软件支持 JDK1.8以上 Solr6的安装包(solr-7.5.0.zip ) Solr自带一个Jetty环境,可以很方便的运行Solr. 直接到解压缩的so ...
- bzoj2961 共点圆 （CDQ分治， 凸包）
/* 可以发现可行的圆心相对于我们要查询的点是在一个半平面上, 然后我们要做的就是动态维护凸壳然后用这个半平面去切它 看看是否是在合法的那一面 然后cdq分治就可以了 代码基本是抄的, */ #inc ...
- url后面带斜杠与不带斜杠的区别
比如: https://www.baidu.com/test/ https://www.baidu.com/test 当Web服务器接收到对某个末尾不含斜杠的url请求时,例如https://www. ...