Socket.io 中如何获取客户端的 IP 地址

在使用 Socket.io 进行服务器与客户端通信的时候,了解客户端的 IP 地址对于定位问题及进行一些安全控制非常重要。本文将介绍如何在 Socket.io 中获取客户端的 IP 地址,希望能对前端开发者有所帮助。

Socket.io 简介

Socket.io 是一个基于 WebSocket 封装的实时双向通信库,可以在浏览器和服务器之间实现实时通信。同其他的 WebSocket 库不同,Socket.io 具有跨浏览器和跨操作系统的 API,使得浏览器和服务器之间建立通信非常容易。这里不再详细介绍 Socket.io 的基础知识。

获取客户端的 IP 地址

Socket.io 中可以通过 socket.request.connection.remoteAddress 获取客户端的 IP 地址。这个属性同时适用于 HTTP 和 WebSocket 连接。示例代码如下:

----- --- - --------------------------------------
----- -- - --------------------------

---------------

-------- ------------ ---- -
  -- ---- ---- --
--

------------------- -------- -- -
  ---------------- ---------- ---- - - -----------------------------------------
---

在上述示例中,当有新的连接建立时,输出 New connection from xxx.xxx.xxx.xxx 的信息以标识连接的 IP 地址。

但是需要注意的是,socket.request.connection.remoteAddress 并不能保证总是能获取正确的客户端 IP 地址。因为在节点网关 (NGINX、Apache,到 Express、Koa 等后端) 的反向代理下,如果代理服务器没有将请求头 X-Forwarded-For 设置为客户端 IP 地址,可能上述方法获取到的是代理服务器的 IP 地址。如果需要在反向代理下准确获取客户端的真实IP地址,可以通过访问请求头中的 X-Forwarded-For 属性,该属性是一个包含了客户端IP地址的由逗号划分的值。我们可以通过 socket.handshake.headers['x-forwarded-for'] 获取到。 如果需要处理多级反向代理,应该去查找第一个非内部地址,例如:

-------- ------------------- -
  --- ------ - --------------------------------------------
  -- -------- -
    ----- ---- - ------------------
    --- ---- - - -- - - ------------ ---- -
      -- -------- -- ---------------------- -
        ------ - --------
        ------
      -
    -
  - ---- -
    ------ - ----------------------------------------
  -
  ------ -------
-

-------- --------------- -
  ------ -------------------------------------------------------------------------------
-

上述实现依赖了内部 isPrivateIp 函数,用于判断是否是内部地址(10.0.0.0/8,172.16.0.0/12,192.168.0.0/16,IPv6 中的 ::1),如果不是,直接返回该地址,否则继续查找下一个地址。

总结

本文介绍了如何在 Socket.io 中获取客户端的 IP 地址,强调了在反向代理下获取客户端的真实IP地址。希望本文内容对前端开发者有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645c9a69968c7c53b0f07e47


猜你喜欢

  • RxJS 中的 filter 操作符详解

    RxJS 是前端开发中的一个优秀的响应式编程库,它为我们提供了许多强大的操作符和工具,其中 filter 操作符是其最为基础和重要的一个。 filter 操作符能够帮助我们过滤掉不需要的数据流,只保留...

    1 年前
  • SASS 升级后的新特性介绍及使用实例

    SASS(Syntactically Awesome Style Sheets)是一种比 CSS 更强大的 CSS 预处理语言。它可以让前端开发者更加高效地编写和维护 CSS 代码。

    1 年前
  • Vue 中使用 Echarts 进行数据可视化

    Echarts 是一款基于 JavaScript 的数据可视化库,能够以各种形式呈现复杂的数据关系,使得数据变得更有意义和容易理解。在 Vue 中,我们可以很方便地使用 Echarts 实现数据可视化...

    1 年前
  • Tailwind CSS 中如何实现动态生成颜色?

    背景 当我们在进行前端网页设计时,经常需要使用到各种颜色方案。而在使用 Tailwind CSS 进行网页设计时,我们希望能够动态地生成一些颜色方案,以便更好地兼容不同的浏览器和设备,并提高设计效率和...

    1 年前
  • Sequelize 如何建立索引和添加约束

    Sequelize 是一个基于 Node.js 的 ORM 模块,支持多种数据库(如 MySQL、PostgreSQL、SQLite 和 Microsoft SQL Server)并提供了一些关系型数...

    1 年前
  • AbstractReduxStore 的使用与讲解

    前言 在前端开发中,Redux 是一个非常常用的状态管理工具。Redux Store 是 Redux 的核心概念之一,它负责管理整个应用的状态,并暴露出一些方法供开发者操作状态。

    1 年前
  • Webpack 打包后出现的问题汇总

    Webpack 是一个常用于前端项目打包的工具,它可以将多个 JavaScript 文件打包成一个或多个文件,并进一步优化项目的性能。然而,在使用 Webpack 进行项目打包时,可能会出现一些问题。

    1 年前
  • React Hooks 实战:实现一个表单

    在过去,React 的组件功能局限于类组件,这意味着我们必须使用 class 组件来实现组件的状态和生命周期逻辑。但随着 React Hooks 的发布,我们可以在函数组件中使用状态和其他 React...

    1 年前
  • Flexbox 布局之圣杯布局(响应式)

    引言 随着互联网技术的不断发展,前端技术作为网站开发中的重要部分,也在不断地演进和升级,其中 Flexbox 布局在前端中越来越受到广泛的关注和应用。本文将通过一个经典的 Flexbox 布局——圣杯...

    1 年前
  • 使用 LESS 实现带角标的图标效果

    在前端开发中,常常需要在图标上添加角标以表明数量、状态等信息。本文将介绍如何使用 LESS 实现带角标的图标效果。 前置知识 在本文中,我们将使用 LESS 预处理语言来生成 CSS 样式。

    1 年前
  • Koa + React.js 实现前后端分离开发

    随着前端开发技术的不断发展,前后端分离已经成为了一种标配的开发方式,而 Koa 和 React.js 则成为了目前最流行的前后端分离架构之一。本篇文章将介绍如何使用 Koa 和 React.js 实现...

    1 年前
  • TypeScript 中基础类型的概念和使用

    引言 TypeScript 是一种类型安全的 JavaScript 超集,它为 JavaScript 添加了类型系统和一些其它新特性。本文将介绍 TypeScript 中的基础类型,包括数字类型、字符...

    1 年前
  • Headless CMS 的优势与应用场景分析

    什么是 Headless CMS? Headless CMS 是一种将内容与呈现代码(如 HTML、CSS 或 JavaScript)分离的内容管理系统。Headless CMS 提供 API,开发人...

    1 年前
  • Deno REPL 的用法介绍

    前端开发人员常常需要使用 JavaScript,而 Deno 是一种可用于编写 JavaScript 应用程序的新方法。Deno 提供了一个交互式 REPL(Read-Eval-Print Loop)...

    1 年前
  • Mocha 测试框架中如何测试 Angular 应用

    前言 Testing 是前端开发中必不可少的一环,而测试框架则是测试的基石。Mocha 是一款优秀的 JavaScript 测试框架,它可以运行在浏览器和 Node.js 环境中,并且可以方便地扩展。

    1 年前
  • Next.js 项目中的前后端分离方案分享

    前言 随着前端框架的快速发展,前后端分离已成为 Web 开发的主要趋势。Next.js 是一款基于 React.js 的服务端渲染框架,它不仅可以方便地实现 SSR,还提供了诸多工具和插件,使得前后端...

    1 年前
  • Hapi.js 中使用 OpenAPI 规范的最佳实践

    随着 Web 应用的发展,越来越多的企业开始将 API 开发作为重要的业务需求。而如何规范和管理多样化的 API 接口就成为一个大问题。OpenAPI 规范是专门为此而设计的 API 规范和模型定义的...

    1 年前
  • ES6/ES7/ES8/ES9/ES10 如何简单的理解?

    ES6、ES7、ES8、ES9、ES10是JavaScript的新版本,也被称为ECMAScript的版本,随着时间的推移,不断地更新和改进,为我们的前端开发提供了更好的语言能力和更强的性能,让我们可...

    1 年前
  • ES8 如何实现 Object.values() 和 Object.entries() 方法?

    ES8 中新增了 Object.values() 和 Object.entries() 方法,用于获取对象的所有值和键值对,这些方法能够极大地简化开发者的代码编写工作,本文将详细介绍 ES8 如何实现...

    1 年前
  • ES2020 新增可选链接和 Nullish 合并运算符

    在 ES2020 中,新增了两个运算符:可选链(Optional Chaining)和 Nullish 合并运算符(Nullish Coalescing),这两个运算符为我们开发者提供了更好的语言特性...

    1 年前

相关推荐

    暂无文章