内容简介:一直以来觉得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能跨域》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。