Nodejs中使用socket.io client 开发时兼容IE低版本的办法

Nodejs中使用socket.io client 开发时兼容IE低版本的办法

实战当中，发现IE系列浏览器，无法兼容socket.io client，向Server端无法接收、发送，经查资料，需要实例化时一下增加判断加些参数即可。

下面代码在经典的socket聊到室应用当中，IE6以上一切正常。

if (/Firefox/\s/.test(navigator.userAgent)){ var socket = io.connect(‘127.0.0.1:8000’,{transports:[‘xhr-polling’]}); } else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){ var socket = io.connect(‘127.0.0.1:8000’,{transports:[‘jsonp-polling’]}); } else { var socket = io.connect(‘127.0.0.1:8000’); }


4 回复

Node.js 中使用 Socket.IO 客户端开发时兼容 IE 低版本的办法

在实际项目开发过程中，经常会遇到不同浏览器兼容性问题。特别是在处理老版本的 IE 浏览器时，Socket.IO 客户端可能会遇到一些兼容性问题，导致无法正常连接服务器进行消息收发。

问题描述

在使用 Socket.IO 客户端时，发现 IE 系列浏览器（尤其是 IE6 及以上版本）无法正常连接到服务器，导致无法发送或接收消息。经过查阅资料，我们发现通过在实例化 Socket.IO 客户端时添加一些参数可以解决这一问题。

解决方案

根据用户的浏览器类型，我们可以选择不同的传输方式来提高兼容性。例如，在 Firefox 浏览器中，可以使用 xhr-polling 作为传输方式；而在 IE 浏览器中，则可以使用 jsonp-polling 作为传输方式。下面是具体的实现代码：

// 判断当前浏览器类型并设置合适的传输方式
if (/Firefox\/\d+/.test(navigator.userAgent)) { // 检测 Firefox
    var socket = io.connect('http://127.0.0.1:8000', { transports: ['xhr-polling'] });
} else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)) { // 检测 IE
    var socket = io.connect('http://127.0.0.1:8000', { transports: ['jsonp-polling'] });
} else {
    // 其他现代浏览器可以直接使用默认设置
    var socket = io.connect('http://127.0.0.1:8000');
}

// 连接成功后的回调函数
socket.on('connect', function() {
    console.log('Connected to server!');
});

// 接收消息的事件监听
socket.on('message', function(data) {
    console.log('Received message:', data);
});

代码解释

  • 检测浏览器类型：通过正则表达式匹配用户代理字符串 (navigator.userAgent) 来判断当前浏览器类型。
  • 设置传输方式：根据不同的浏览器类型，指定不同的传输方式。例如，对于 Firefox 使用 xhr-polling，对于 IE 使用 jsonp-polling。
  • 创建 Socket.IO 实例：使用 io.connect() 方法创建 Socket.IO 客户端实例，并传入相应的传输方式。
  • 事件监听：通过 socket.on('connect', callback) 监听连接成功事件，以及通过 socket.on('message', callback) 监听来自服务器的消息。

通过上述方法，可以显著提升 Socket.IO 在 IE 低版本浏览器中的兼容性，确保消息能够正常收发。


socket.io提供了针对各个版本浏览器的‘socket’功能的封转：websocket，长连接，流，flash什么的。给你格式化下代码：

if (/Firefox\/\s/.test(navigator.userAgent)){
    var socket = io.connect('127.0.0.1:8000',{transports:['xhr-polling']}); 
} 
else if (/MSIE (\d+.\d+);/.test(navigator.userAgent)){
    var socket = io.connect('127.0.0.1:8000',{transports:['jsonp-polling']}); 
} 
else { 
    var socket = io.connect('127.0.0.1:8000'); 
}

那用IE9 +会判断成MSIE吗？

为了确保 Node.js 中使用 socket.io 客户端能够兼容 IE 低版本（如 IE6-8），我们需要根据不同的浏览器环境选择合适的传输方式。低版本的 IE 不支持一些现代浏览器所需的高级特性，比如 WebSocket 或 XHR 长轮询。因此，我们可以通过指定特定的传输方式来提高兼容性。

以下是一个示例代码片段，展示了如何根据不同浏览器环境选择合适的传输方式：

const socketIoClient = require('socket.io-client');

// 检查当前浏览器环境
if (navigator.userAgent.match(/MSIE\s(\d+)/)) { // 匹配IE低版本
    const ieVersion = parseInt(RegExp.$1, 10);
    if (ieVersion < 9) { // 对于IE6-8，使用jsonp-polling
        var socket = socketIoClient.connect('http://127.0.0.1:8000', { transports: ['jsonp-polling'] });
    } else { // 对于IE9及以上，可以使用xhr-polling
        var socket = socketIoClient.connect('http://127.0.0.1:8000', { transports: ['xhr-polling'] });
    }
} else if (navigator.userAgent.match(/Firefox\/(\d+)/)) { // Firefox
    var socket = socketIoClient.connect('http://127.0.0.1:8000', { transports: ['xhr-polling'] });
} else {
    // 其他现代浏览器可以使用默认配置
    var socket = socketIoClient.connect('http://127.0.0.1:8000');
}

// 接下来可以处理socket的各种事件，例如：
socket.on('connect', () => {
    console.log('Connected to server!');
});

socket.on('message', (data) => {
    console.log('Received message:', data);
});

socket.on('disconnect', () => {
    console.log('Disconnected from server!');
});

在这个示例中，我们首先通过 navigator.userAgent 来检测当前使用的浏览器类型及其版本号。然后，基于检测结果，我们为 socket.io 的客户端连接指定相应的传输方式（例如 jsonp-polling 和 xhr-polling）。这种方式可以提高在低版本IE中的兼容性，并且保持与现代浏览器的良好交互。

回到顶部