前端 socket.io 跨域

在使用Socket.io进行前端跨域通信时,可以通过设置Socket.io的cors选项来允许跨域请求。
以下是一个简单的例子,展示了如何在Node.js的服务器代码中配置Socket.io以允许跨域连接:

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');// 创建一个Express应用和HTTP服务器
const app = express();
const server = http.createServer(app);// 创建Socket.io服务器并绑定到HTTP服务器上
const io = socketIO(server, {cors: {origin: "http://your-frontend-domain.com", // 允许跨域的前端域名methods: ["GET", "POST"], // 允许的跨域请求方法transports: ['websocket', 'polling'], // 允许的跨域通信传输方式credentials: true // 允许cookies等认证信息一起跨域传递}
});// 监听客户端连接
io.on('connection', (socket) => {console.log('A client has connected');// 定义处理消息的回调函数socket.on('message', (data) => {console.log('Received message:', data);// 发送消息回客户端socket.emit('message', 'Hello, client!');});// 定义处理disconnect的回调函数socket.on('disconnect', () => {console.log('A client has disconnected');});
});// 启动服务器
server.listen(3000, () => {console.log('Server is running on port 3000');
});

前端代码使用Socket.io客户端连接到服务器:

const socket = io('http://your-backend-domain.com:3000', {transports: ['websocket', 'polling'],withCredentials: true
});socket.on('connect', () => {console.log('Connected to the server');
});socket.on('message', (data) => {console.log('Received message:', data);
});// 发送消息到服务器
socket.emit('message', 'Hello, server!');

确保替换your-frontend-domain.com和your-backend-domain.com:3000为实际的前端和后端域名和端口号。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/388093.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应急靶场(11):【玄机】日志分析-apache日志分析

题目 提交当天访问次数最多的IP,即黑客IP黑客使用的浏览器指纹是什么,提交指纹的md5查看index.php页面被访问的次数,提交次数查看黑客IP访问了多少次,提交次数查看2023年8月03日8时这一个小时内有多少IP访问,提交次数 …

OrangePi AI Pro 固件升级 —— 让主频从 1.0 GHz 到 1.6 GHz 的巨大升级

前言 OrangePi AI Pro 最近发布了Ascend310B-firmware 固件包,据说升级之后可以将 CPU 主频从 1.0 GHz 提升至 1.6 GHz,据群主大大说,算力也从原本的 8T 提升到了 12T,这波开发板的成长让我非常的 Amazing 啊!下面就来…

Linux命令行 复制模式/扩展模式 调用系统功能切换

问题背景 公司软件需要从window 适配国产操作系统,目前使用wine方案。在我们软件有个切换屏幕模式的功能,需要支持用户在我们软件内,切换复制模式/扩展模式。 在linux 下 uos/deepin 等系统。如果要从复制模式设置为扩展模式使用命令行时&a…

Windows下nmap命令及Zenmap工具的使用方法

一、Nmap简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端,并且推断计算机运行哪个操作系统(这是亦称 fingerprinting)。它是网络管理员必用的软件之一,以及用以评…

【Bug收割机】已解决使用maven插件打包成功,在控制台使用mvn命令打包失败问题详解,亲测有效!

文章目录 前言问题分析报错原因解决方法私域 前言 在maven项目中,大家经常会使用maven插件来打包项目文件 但是有的人也习惯使用mvn命令在控制台直接进行打包,因为这样可以自定义组装一些命令,使用起来也更加灵活方便,比如mvn pa…

C++进阶-哈希扩展(位图和布隆过滤器)

1. 位图 1.1 位图概念 面试题 给40亿个不重复的无符号整数,没排过序。给一个无符号整数,如何快速判断一个数是否在 这40亿个数中。【腾讯】 解题思路1:暴⼒遍历,时间复杂度O(N),太慢 解题思路2:排序⼆分查…

mybatis-plus中出现Field ‘id‘ doesn‘t have a default value问题解决方法

问题分析: 出现这个原因,主要是因为mybatis-plus自身查询的特性,因为查询都是它自己内部设定好的参数,一般为了简便,都会默认自己底层的数据库对应的主键id字段是自增的,也就是mybatis-plus认为不需要id,每…

重磅惊喜!OpenAI突然上线GPT-4o超长输出模型!「Her」高级语音模式已开放测试

在最近的大模型战争中,OpenAI似乎很难维持霸主地位。虽然没有具体的数据统计,但Claude3.5出现后,只是看网友们的评论,就能感觉到OpenAI订阅用户的流失: Claude3.5比GPT-4o好用,为什么我们不去订阅Claude呢&…

学习c语言第18天(字符串和内存函数)

1.函数介绍 1.1 strlen size_t(就是无符号整形) strlen(const char * str); 字符串已经\0作为结束标志,strlen函数返回的是在字符串中\0前面出现的字符个数(不包 含\0) 参数指向的字符串必须要以\0结束。 注意函数的返回值为size_t,…

文件系统 --- 文件结构体,文件fd以及文件描述符表

序言 在编程的世界里,文件操作是不可或缺的一部分。无论是数据的持久化存储、日志记录,还是简单的文本编辑,文件都扮演着至关重要的角色。然而,当我们通过编程语言如 C、Java 等轻松地进行文件读写时,背后隐藏的复杂机…

自动化运维工具之Ansible

一、Ansible Ansible是一个基于Python开发的配置管理和应用部署工具,现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点,Pubbet和Saltstack能实现的功能,Ansible基本上都可以实现。 Ansible能批量配置、部署、管理上千台主机…

ADS环境下的ARM汇编程序设计实验报告

ADS环境下的ARM汇编程序 一、 实验目的 1.了解 ARM汇编语言的基本框架,学会使用ARM的汇编语言编程。 2.熟悉ADS1.2下进行汇编语言程序设计的基本流程; 3. 了解AXD中调试功能。 二、 实验环境 硬件:PC机 软件:ADS…

基于VScode和C++ 实现Protobuf数据格式的通信

目录 1. Protobuf 概述1.1 定义1.2Protobuf的优势 2. Protobuf 语法3、序列号和反序列化3.1 .pb.h 头文件3.2 序列化3.3 反序列化 4、测试用例 Protobuf详细讲解链接 1. Protobuf 概述 1.1 定义 protobuf也叫protocol buffer是google 的一种数据交换的格式,它独立…

熵权法确定权重

熵权法(Entropy Weight Method, EWM)是一种在综合考虑各因素提供信息量基础上计算综合指标的数学方法,属于客观综合定权法,在确定权重时更有说服力。该方法主要根据各指标传递给决策者的信息量大小来确定权重。在信息论中&#xf…

[RoarCTF 2019]Easy Calc1

打开题目 查看源码,看到 看到源代码有 calc.php,构造url打开 看到php审计代码, 由于页面中无法上传num,则输入 num,在num前加入一个空格可以让num变得可以上传,而且在进行代码解析时,php会把前…

库存超卖问题解决方式

文章目录 超卖问题解决方式什么是库存超卖问题?乐观锁和悲观锁的定义超卖问题解决方式一、悲观锁1.jvm单机锁2.通过使用mysql的行锁,使用一个sql解决并发访问问题3.使用mysql的悲观锁解决4. 使用redis分布式锁来解决 二、乐观锁解决1.版本号2. CAS法&…

数据结构第1天作业 7月31日

2.3按位置操作 1&#xff09;按照位置插入数据 void Insert_seqlist_single(Seqlist* sq,int arr_sub,int num){if(sq->posN ){ //判断顺序列表是否为满printf("error");return;}else if(arr_sub<0||arr_sub>sq->pos){printf("error…

React组件生命周期

一张图解释 React 类组件生命周期方法 React 类组件的生命周期可以分为三个主要阶段&#xff1a; 挂载&#xff08;Mounting&#xff09; 更新&#xff08;Updating&#xff09; 卸载&#xff08;Unmounting&#xff09; 挂载阶段 在组件实例被创建并插入到 DOM 中时调用…

SpringSecurity登录认证流程及源码分析

目录 一 作用 二 流程及源码分析 一 作用 spring security作为spring家族中的一员&#xff0c;它的主要作用有两个&#xff0c;分别是认证和授权。 我们以前在实现登录功能的时候&#xff0c;前端会传来用户名和密码&#xff0c;然后我们根据前端传来的数据从用户表中的数据进…