websocket能跨域!
一直以来觉得websocket和ajax应该一样，是不能跨域的。今天查了一下资料，发现websocket是可以跨域的，妥妥被打脸。于是决定好好学习一下websocket。
使用node开发一个demo
用node做demo再合适不过了，比起java，简单不知道多少。node下有个socket.io的库。是对websocket的包装，据说在浏览器不支持websocket的情况下可以自动识别采用long polling。node的安装很简单，这里不做介绍。下面是demo的创建过程。
工程构建
新建文件：package.json
安装socket.io库：npm install socket.io --save
服务器端
新建server.js，监听1234端口
var io = require('socket.io')(1234);
io.sockets.on('connection', function (client) {
client.on('message', function (msg) { //监听到信息处理
console.log('Message Received: ', msg);
client.send('服务器收到了信息：' + msg);
});
client.on("disconnect", function () { //断开处理
console.log("client has disconnected");
});
});
console.log("listen 1234...");
客户端
新建index.html文件。客户端逻辑：回车后发送input内的消息到服务器端，接受到服务器端消息显示在页面上。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>socket.io</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>
<body>
Incoming Chat:
<ul></ul>
<br/>
<input type="text" />
<script>
$(function () {
var iosocket = io.connect('http://localhost:1234/');
var $ul = $("ul");
var $input = $("input");
iosocket.on('connect', function () { //接通处理
$ul.append($('<li>连上啦</li>'));
iosocket.on('message', function (message) { //收到信息处理
$ul.append($('<li></li>').text(message));
});
iosocket.on('disconnect', function () { //断开处理
$ul.append('<li>Disconnected</li>');
});
});
$input.keypress(function (event) {
if (event.which == 13) { //回车
event.preventDefault();
console.log("send : " + $input.val());
iosocket.send($input.val());
$input.val('');
}
});
});
</script>
</body>
演示
运行服务器端：node server.js，启动服务。
用浏览器打开index.html，file:///.../index.html。发现可以正常交互，此时的源是：file://。因此websocket是支持跨域的。
socket.io支持websocket和long polling
由于websocket协议在浏览器的兼容性上还不够理想，通常会有long poling的替代方案。socket.io是即支持websocket又支持long polling的。默认情况下，会先发送polling的包，确认server端是否支持websocket，如果不支持会自动转为polling方式。可以通过配置客户端和服务器端代码实现协议的选择。然而，本次测试发现socket.io2.x版本在polling方式下也不能在ie中正常使用。
服务器端配置
//只支持polling方式
var io = require('socket.io')(1234, {"transports":['polling']});
//只支持websocket方式
var io = require('socket.io')(1234, {"transports":['websocket']});
//两种方式都支持
var io = require('socket.io')(1234, {"transports":['polling', 'websocket']});
客户端配置
//使用websocket协议连接服务器端
var iosocket = io.connect('http://localhost:1234/', {
"transports":['websocket']
});
//使用polling协议连接服务器端
var iosocket = io.connect('http://localhost:1234/', {
"transports":['polling']
});
安全性
如何不跨域
websocket既然能支持跨域方法，那就是说，一个开放给公网的websocket服务任何人都能访问，那安全性如何保障？可以控制只有通过认证的域名才能访问吗？
未完，待续...
网友评论