解决WebSocket的兼容性问题及过程

 更新时间:2025年12月16日 15:30:16   作者:smallbone  
本文介绍了如何解决WebSocket的兼容性问题,包括原生WebSocket和SockJS、Socket.IO等解决方案

解决WebSocket的兼容性

我们知道WebSocket是一种在服务器与客户端双向通讯的技术,使用原生的WebSocket可以最小化 服务器资源的使用并且为两者提供了一种统一的通信方式。

随着HTML5的普及,现代浏览器(IE10+)基本上都已经原生支持WebSocket了,下面是支持WebSocket协议的浏览器:

  • Internet Explorer 10
  • Firefox 6
  • Chrome 14
  • Safari 6.0
  • Opera 12.1
  • iOS Safari 6.0
  • Chrome for Android 27.0 但是对于旧的浏览器该如何实现WebSocket的功能呢?下面就介绍一下几种常见的解决方案:

1.SockJS

SockJS是一个JavaScript库,它为浏览器提供了一个类似WebSocket的对象。首先,它会优先使用原生的WebSocket;如果不支持,则使用streaming;如果streaming也不支持,则使用轮询(polling)。

下面是支持的浏览器概览:

  • SockJS-node
  • SockJS-erlang
  • SockJS-tornado
  • SockJS-twisted
  • SockJS-ruby
  • SockJS-netty
  • SockJS-gevent (SockJS-gevent fork)
  • SockJS-go

客户端的使用

首先加载SockJS库

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

库加载完后, 就可与SockJS服务器建立连接了

var sock = new SockJS('https://mydomain.com/my_prefix');
 sock.onopen = function() {
     console.log('open');
     sock.send('test');
 };

 sock.onmessage = function(e) {
     console.log('message', e.data);
     sock.close();
 };

 sock.onclose = function() {
     console.log('close');
 };

服务器端的使用(NodeJS)

首先,安装sockjs-node:

npm install sockjs

接着就可以通过监听事件来与客户端进行类似WebSocket的通信了

var http = require('http');
var sockjs = require('sockjs');

var echo = sockjs.createServer({ sockjs_url: 'http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js' });
echo.on('connection', function(conn) {
    conn.on('data', function(message) {
        conn.write(message);
    });
    conn.on('close', function() {});
});

var server = http.createServer();
echo.installHandlers(server, {prefix:'/echo'});
server.listen(9999, '0.0.0.0');

2.Socket.IO

Socket.IO能够启用基于事件的双向通信,使用它同样也需要搭建相应的服务端;首先它也会首选WebSocket,如果不支持则会使用下面的替代方案:

  • Adobe Flash Socket(缺点:需要在服务器上打开一个额外的端口,默认为10843)
  • Ajax long polling
  • Ajax multipart streaming
  • Forever iframe
  • JSONP polling

浏览器兼容性

客户端

//加载Socket.IO库
<script src="http://localhost:8181/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://localhost:8181');
        console.log('a user connected');
        socket.emit('my other event', { my: 'data' });
        socket.on('disconnect', function(){
        console.log('user disconnected');
    });
</script>

服务端

安装socket.io

npm install socket.io --save

配置服务器

var server = require('http').createServer();
var io = require('socket.io')(server);
io.on('connection', function(socket){
    socket.emit('news', { hello: 'world' });
    socket.on('event', function(data){});
    socket.on('disconnect', function(){});
});
server.listen(3000);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Dapr+NestJs编写Pub及Sub装饰器实战示例

    Dapr+NestJs编写Pub及Sub装饰器实战示例

    这篇文章主要为大家介绍了Dapr+NestJs编写Pub及Sub装饰器的实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Node.js 中 http 模块的深度剖析与实战应用小结

    Node.js 中 http 模块的深度剖析与实战应用小结

    本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮助开发者熟练掌握http模块,构建高效的网络应用,感兴趣的朋友一起看看吧
    2025-01-01
  • npm、pnpm、yarn之间的区别小结

    npm、pnpm、yarn之间的区别小结

    平时在项目开发中,经常用到npm、pnpm、yarn这些来安装包,本文主要介绍了npm、pnpm、yarn之间的区别小结,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • nodejs服务内存泄露排查过程和优化方法

    nodejs服务内存泄露排查过程和优化方法

    在开发和部署Node.js应用程序时,内存泄露是一个常见的挑战,本文将探讨如何对于一个陌生项目进行内存排查和优化的方法,文章通过图文介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 详解阿里Node.js技术文档之process模块学习指南

    详解阿里Node.js技术文档之process模块学习指南

    这篇文章主要介绍了详解阿里Node.js技术文档之process模块学习指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • node.js中的console.dir方法使用说明

    node.js中的console.dir方法使用说明

    这篇文章主要介绍了node.js中的console.dir方法使用说明,本文介绍了console.dir的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • NVM管理node版本以及报错解决

    NVM管理node版本以及报错解决

    在开发过程中有时候会遇到老项目和新项目node版本不一致的情况,这篇文章主要给大家介绍了关于NVM管理node版本以及报错解决方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Win7系统只能安装的nodejs13.14,如何安装高版本nodejs

    Win7系统只能安装的nodejs13.14,如何安装高版本nodejs

    正常情况下,Win7支持的Node.js最高版本是V13.14,但在开发过程中,有不少Vue项目或其他需要依赖Node环境的项目,对Node版本要求都比较高,对此,我们要么重装操作系统到Win8以上,要么就得想办法在Win7中安装高版本的Node,否则很多项目在编译打包时可能会出现警告信息或失败
    2024-11-11
  • 服务端nodejs抓取jsonp接口数据实现示例

    服务端nodejs抓取jsonp接口数据实现示例

    这篇文章主要为大家介绍了服务端nodejs抓取jsonp接口数据实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 用nodejs实现json和jsonp服务的方法

    用nodejs实现json和jsonp服务的方法

    本篇文章主要介绍了用nodejs实现json和jsonp服务的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论