websocket能跨域

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

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

查看所有标签

猜你喜欢:

websocket能跨域

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

码农书籍

数据结构与算法分析

韦斯 / 机械工业 / 2007-1 / 55.00元

本书是国外数据结构与算法分析方面的标准教材，使用最卓越的Java编程语言作为实现工具讨论了数据结构(组织大量数据的方法)和算法分析(对算法运行时间的估计)。　　随着计算机速度的不断增加和功能的日益强大，人们对有效编程和算法分析的要求也在增长。本书把算法分析与最有效率的Java程序的开发有机地结合起来，深入分析每种算法，内容全面、缜密严格，并细致讲解精心构造程序的方法。　　第......一起来看看《数据结构与算法分析》这本书的介绍吧!

码农工具