Nodejs相关：请问socket.io如何在ie9以下的浏览器使用呢？

Nodejs相关：请问socket.io如何在ie9以下的浏览器使用呢？

想做推送的功能，看到下面这个简易聊天室，运行了下，在低版本ie下用不了。请问如何解决呢？* 前台代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        $(function(){
            // var iosocket = io.connect();
            if (/Firefox\/\s/.test(navigator.userAgent)){
                var iosocket = io.connect('localhost:5000',{transports:['xhr-polling']}); 
            } 
            else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){
                var iosocket = io.connect('localhost:5000',{transports:['jsonp-polling']}); 
            } 
            else {
                var iosocket = io.connect('localhost:5000'); 
            }
            iosocket.on('connect', function () {
                $('#incomingChatMessages').append($('<li>Connected</li>'));
  
                iosocket.on('message', function(message) {
                    $('#incomingChatMessages').append($('<li></li>').text(message));
                });
                iosocket.on('disconnect', function() {
                    $('#incomingChatMessages').append('<li>Disconnected</li>');
                });
            });
  
            $('#outgoingChatMessage').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();
                    iosocket.send($('#outgoingChatMessage').val());
                    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
                    $('#outgoingChatMessage').val('');
                }
            });
        });
    </script>
</head>
<body>
Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>

服务器代码：

var fs = require('fs'),
    http = require('http'),
    socketio = require('socket.io');
	  
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(5000, function() {
    console.log('Listening at: http://localhost:5000');
});
socketio.listen(server).on('connection', function (socket) {
    socket.on('message', function (msg) {
        console.log('Message Received: ', msg);
        socket.broadcast.emit('message', msg);
    });
});

8 回复

要让Socket.IO在IE9及以下版本的浏览器中正常工作，我们需要确保Socket.IO选择了合适的传输方式（transports）。这些旧版浏览器可能不支持WebSocket，因此需要使用其他类型的传输协议，如jsonp-polling或xhr-polling。

示例代码

前台代码

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        $(function() {
            var iosocket;

            if (/Firefox\/\s/.test(navigator.userAgent)) {
                iosocket = io.connect('localhost:5000', {transports: ['xhr-polling']});
            } else if (/MSIE (\d+.\d+);/.test(navigator.userAgent) && parseFloat(RegExp.$1) < 10) {
                iosocket = io.connect('localhost:5000', {transports: ['jsonp-polling']});
            } else {
                iosocket = io.connect('localhost:5000');
            }

            iosocket.on('connect', function () {
                $('#incomingChatMessages').append($('<li>').text('Connected'));

                iosocket.on('message', function(message) {
                    $('#incomingChatMessages').append($('<li>').text(message));
                });

                iosocket.on('disconnect', function() {
                    $('#incomingChatMessages').append($('<li>').text('Disconnected'));
                });
            });

            $('#outgoingChatMessage').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();
                    iosocket.send($('#outgoingChatMessage').val());
                    $('#incomingChatMessages').append($('<li>').text($('#outgoingChatMessage').val()));
                    $('#outgoingChatMessage').val('');
                }
            });
        });
    </script>
</head>
<body>
    Incoming Chat: <ul id="incomingChatMessages"></ul>
    <br />
    <input type="text" id="outgoingChatMessage">
</body>
</html>

服务器代码

var fs = require('fs'),
    http = require('http'),
    socketio = require('socket.io');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(5000, function() {
    console.log('Listening at: http://localhost:5000');
});

var io = socketio.listen(server);

io.sockets.on('connection', function(socket) {
    socket.on('message', function(msg) {
        console.log('Message Received: ', msg);
        socket.broadcast.emit('message', msg);
    });
});

解释

  1. 前台代码:

    • 使用jQuery来简化DOM操作。
    • 检测浏览器类型，并根据不同的浏览器选择合适的传输方式。
    • xhr-polling用于Firefox，因为它支持这种传输方式。
    • jsonp-polling用于IE9及以下版本，因为它们不支持WebSocket，但支持JSONP。

  2. 服务器代码:

    • 创建HTTP服务器并监听5000端口。
    • 使用Socket.IO监听服务器上的连接。
    • 处理客户端发送的消息，并将消息广播给所有其他连接的客户端。

通过这种方式，我们可以确保Socket.IO在不同浏览器中都能正常工作，包括IE9及以下版本。


socket.io可以优雅降低的，IE9以下没问题。 我没看你的代码，但我觉得你要找你自己代码的原因，不要找socket.io的

websocket html5支持才能用，这个没解没办法的

楼上说错了 socket.io 不等于websocket

node.js聊天室 参照了这个，在低版本的ie就可以了。其中原理，继续学习中…

socket.io需要配置不同的协议已支持不同版本的浏览器，理论上从IE6开始就能支持
var io = require('socket.io').listen(server);
require('./config/sio')(io);

config/sio.js中如下配置：

sio.configure(function() { //sio.enable(‘browser client minification’); // send minified client //sio.enable(‘browser client etag’); // apply etag caching logic based on version number //sio.enable(‘browser client gzip’); // gzip the file sio.set(‘log level’, 1); // reduce logging

	// enable all transports (optional if you want flashsocket support, please note that some hosting
	// providers do not allow you to create servers that listen on a port different than 80 or their
	// default port)
	sio.set('transports', ['websocket', 'flashsocket', 'htmlfile', 'xhr-polling', 'jsonp-polling']);
	//sio.set('store', store);
	sio.set('store', new RedisStore({
		redisPub : pub
		, redisSub : sub
		, redisClient : client
	}));
	sio.set('authorization', function(data, accept) {
		// check if there's a cookie header
		var cookies = data.headers.cookie;
		if (cookies) {
			cookies = cookie.parse(cookies);
			//cookies = utils.parseSignedCookies(cookies, 'dfdfdfdfgegsgkkafkjgoijgmv');
			cookies = utils.parseJSONCookies(cookies);
			data.sessionID = cookies['express.sid'];
		} else {
			// if there isn't, turn down the connection with a message
			// and leave the function.
			return accept('No cookie transmitted.', false);
		}
		// accept the incoming connection
		accept(null, true);
	});
});

socket.io在低版本ie使用轮询，我试过一次是，低级IE不支持JSON对象，你去下载个JOSN2.js在前端页面上socket.io.js之前引入（这个js因为用到JSON对象但是没写兼容性代码所以低级IE报错了）

在 IE9 以下的浏览器中使用 Socket.IO 需要注意这些浏览器对 WebSocket 的支持非常有限。Socket.IO 提供了多种传输机制，如 xhr-polling 和 jsonp-polling，可以在不支持 WebSocket 的浏览器中使用。

根据你提供的代码，已经为 Firefox 和 IE 做了一些适配，但仍然需要一些额外的调整来确保在 IE8 及以下版本中正常工作。

前台代码调整

  1. 使用 jsonp-polling 作为 IE8 及以下版本的传输机制。
  2. 修正一些潜在的语法错误（如 <li> 标签中的 </li> 错误）。
$(function() {
    var iosocket;

    if (/Firefox\/(\d+\.\d+)/.test(navigator.userAgent)) {
        iosocket = io.connect('localhost:5000', { transports: ['xhr-polling'] });
    } else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
        var ieVersion = parseFloat(RegExp.$1);
        if (ieVersion <= 9) {
            iosocket = io.connect('localhost:5000', { transports: ['jsonp-polling'] });
        } else {
            iosocket = io.connect('localhost:5000');
        }
    } else {
        iosocket = io.connect('localhost:5000');
    }

    iosocket.on('connect', function() {
        $('#incomingChatMessages').append('<li>Connected</li>');

        iosocket.on('message', function(message) {
            $('#incomingChatMessages').append($('<li></li>').text(message));
        });

        iosocket.on('disconnect', function() {
            $('#incomingChatMessages').append('<li>Disconnected</li>');
        });
    });

    $('#outgoingChatMessage').keypress(function(event) {
        if (event.which == 13) {
            event.preventDefault();
            iosocket.emit('message', $('#outgoingChatMessage').val());
            $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
            $('#outgoingChatMessage').val('');
        }
    });
});

服务器代码

服务器代码不需要更改，因为它应该能处理各种传输方式。

var fs = require('fs'),
    http = require('http'),
    socketio = require('socket.io');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(5000, function() {
    console.log('Listening at: http://localhost:5000');
});

socketio.listen(server).on('connection', function(socket) {
    socket.on('message', function(msg) {
        console.log('Message Received: ', msg);
        socket.broadcast.emit('message', msg);
    });
});

通过上述调整，你的应用应该能够在 IE9 以下的浏览器中正常工作。主要的调整是确保选择了合适的传输方式，并修正了一些小的语法问题。

回到顶部