websocket能跨域

栏目: Html5 · 发布时间: 8年前

内容简介：一直以来觉得websocket和ajax应该一样，是不能跨域的。今天查了一下资料，发现websocket是可以跨域的，妥妥被打脸。于是决定好好学习一下websocket。用node做demo再合适不过了，比起java，简单不知道多少。node下有个socket.io的库。是对websocket的包装，据说在浏览器不支持websocket的情况下可以自动识别采用long polling。node的安装很简单，这里不做介绍。下面是demo的创建过程。新建文件：package.json

一直以来觉得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能跨域》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Trading and Exchanges

Larry Harris / Oxford University Press, USA / 2002-10-24 / USD 95.00

This book is about trading, the people who trade securities and contracts, the marketplaces where they trade, and the rules that govern it. Readers will learn about investors, brokers, dealers, arbit......一起来看看《Trading and Exchanges》这本书的介绍吧!

码农工具

RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具

HSV CMYK互换工具