从websocket跨域问题想到的

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服务任何人都能访问,那安全性如何保障?可以控制只有通过认证的域名才能访问吗?
未完,待续...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • 带来两大好处:1:Header互相沟通的Header是很小的,大概只有2 Bytes2:Server Push服务...
    liuboxx1阅读 472评论 0 2
  • WebSocket简介 谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,很多网站为...
    吧啦啦小汤圆阅读 8,114评论 15 75
  • 最近笔者新参与的一个web项目,拟定采用vue2.0来编写,期间遇到有关使用websocket的问题,记录一下,个...
    七宝琥珀阅读 43,885评论 6 35
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,571评论 18 139
  • 总怀疑完美的事物 去幻想残缺的那些美 破坏和暴力潜藏在性的冲动里 前后不过如此 哪些温润的美还是能让内心 填满 爱...
    赵记伟阅读 134评论 2 1