前端 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.mzph.cn/pingmian/51636.shtml

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

相关文章

【C++进阶学习】第九弹——哈希的原理与实现——开放寻址法的讲解

前言: 在前面,我们已经学习了很多存储机构,包括线性存储、树性存储等,并学习了多种拓展结构,效率也越来越高,但是是否有一种存储结构可以在大部分问题中都一次找到目标值呢?哈希可能能实现 目录…

Vite项目中根据不同打包命令配置不同的后端接口地址,proxy解决跨域

在vite.config.ts同级目录添加两个文件 .env.development #开发环境 VITE_APP_ENV developmentVITE_APP_BASE_API .env.production #生产配置 VITE_APP_ENV productionVITE_APP_BASE_API https://www.bdjw.work代码中使用路径 const request axios.create({baseURL: i…

Maven已经导入Junit包,但是还是无法使用注解

Maven已经导入Junit包&#xff0c;但是还是无法使用注解 背景&#xff1a; 导入了Junit的依赖 <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></d…

【Python的GDAL/OGR库】

GDAL/OGR库是一个开源的地理数据处理库&#xff0c;用于读取、写入和转换各种地理数据格式。以下是对GDAL/OGR库的详细解释&#xff1a; GDAL&#xff08;Geospatial Data Abstraction Library&#xff09; 定义&#xff1a;GDAL是一个在X/MIT许可协议下的开源栅格空间数据转…

【初阶数据结构题目】2.移除元素

文章目录 顺序表算法题代码&#xff1a; 顺序表算法题 点击链接做题 移除元素 思路&#xff1a;定义两个变量指向数组第一个位置&#xff0c;判断nums[src]是否等于val 相等&#xff0c;src不相等&#xff0c;nums[dst] nums[src],src,dst 代码&#xff1a; int removeElem…

如何使用CANoe自带的TCP/IP Stack验证TCP的零窗口探测机制

如果想利用CANoe自带的TCP/IP协议栈验证TCP的零窗口探测机制,就必须添加一个网络节点并配置独立的CANoe TCP/IP协议栈,作为验证对象。而与它进行TCP通信的对端也是一个网络节点,但不要配置TCP/IP协议栈,而是使用CAPL代码在底层组装TCP报文模拟TCP通信过程。这样可以尽量减少…

postgrsql——事务概述

事务概述 事务的特性 原子性&#xff08;Atomicity&#xff09;&#xff1a; 事务被视为一个整体&#xff0c;其中的操作要么全部执行成功&#xff0c;要么全部不执行&#xff0c;即不存在部分执行的情况。这确保了事务的完整性和一致性。一致性&#xff08;Consistency&…

C——简介

一、C语言的诞生背景 C语言的诞生并非偶然&#xff0c;它是为了解决当时编程环境中存在的问题而设计的。在C语言出现之前&#xff0c;编程主要依赖于汇编语言&#xff0c;这种语言虽然执行效率高&#xff0c;但编写和维护都极其复杂且容易出错。与此同时&#xff0c;高级语言如…

轻松入门Linux—CentOS,直接拿捏 —/— <1>

一、什么是Linux Linux是一个开源的操作系统&#xff0c;目前是市面上占有率极高的服务器操作系统&#xff0c;目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…

基于Drone实现CI/CD【0到1架构系列】

CI/CD是持续性集成和持续性部署&#xff0c;简单来讲就是自动化构建和自动化部署。目前有很多集成方案&#xff0c;也有很多组装方案&#xff0c;只要能实现自动化构建出制品&#xff0c;再自动部署到生产环境就行。 目前很多源代码都集成了CI/CD功能&#xff0c;drone也是目前…

还在用JVM跑你的Java代码吗?太慢了,试试Oracle的GraalVM吧

前言 对于Java开发者们来说&#xff0c;几乎每天都在和JVM打交道&#xff0c;然而JVM即将过时了。那些对新技术保持敏锐洞察力的开发者&#xff0c;可能已经在生产环境中部署GraalVM生成的二进制程序了&#xff0c;小伙伴们&#xff0c;你们已经用起来了吗&#xff1f; Graal…

【初阶数据结构题目】3.删除有序数组中的重复项

文章目录 顺序表算法题代码&#xff1a; 顺序表算法题 点击链接做题 删除有序数组中的重复项 思路&#xff1a;定义两个指针变量。dst指向数组第一个位置&#xff0c;src指向数组第二个位置。判断nums[dst]是否等于nums[src] 相等&#xff0c;src不相等&#xff0c;dst,nums[…

Windows 11 桌面模拟

Windows 11 桌面模拟 文章目录 Windows 11 桌面模拟代码结构HTML结构CSS样式JavaScript功能 源码效果图 代码结构 HTML结构 <html>: HTML文档的根元素。<head>: 包含文档的元数据&#xff0c;如标题和样式。<base>: 指定相对URL的基准。<title>: 指定…

力扣刷题160 相交链表

题目 力扣题目地址&#xff0c;点此可直接跳转 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 来源&#xff1a;力扣&…

60、redis安装和部署

一、关系型数据库与非关系型数据库 1.1、关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上一般面向于记录。SQL语句&#xff08;标准数据查询语言&#xff09;就是一种基于关系型数据库的语言&#xff0…

Laravel API资源收集器:打造高效数据响应的秘诀

Laravel API资源收集器&#xff1a;打造高效数据响应的秘诀 引言 在构建API时&#xff0c;数据的响应格式对于客户端的易用性和API的可维护性至关重要。Laravel框架提供了一种优雅的方式来处理API响应&#xff0c;即API资源&#xff08;API Resources&#xff09;和资源收集器…

SQL进阶技巧:如何分析共同好友问题?

目录 0 需求 1 数据准备 2 数据分析 3 小结 0 需求 给定每个用户的好友列表,好友关系是互相对称的,返回任意两个用户的共同好友列表 1 数据准备 with common_friend as( select A as id , B,C,D as friends union all select B as id , A,C,E as friends union all s…

pycharm 新建Python项目 使用anaconda环境

1.pycharm 新建完Python项目 2.文件-设置-具体项目-Python解释器-添加解释器-Conda执行文件选择你自己anaconda安装目录下Scripts\conda.exe -加载环境-选择现有的Conda环境或者新建一个环境

将gitee 上的nvim 配置 从gitee 上下载下来,并配置虚拟机

首先是下载 gitee 上的配置。 然后是 配置 tmux 然后是配置nvim . 1 在init.lua 文件中注释掉所有的与第三方插件有关的内容。 2 在packer 的文件中 &#xff0c; 注释掉所有的与 第三方插件有关的代码。 3 首先要保证 packer 能够正确的安装。 4 然后开始 安装 所有的插件…

自动化立体库各种故障解除方案

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载 堆垛机故障解除方案核心内容&#xff1a; 故障代码与可能原因&#xff1a; F01&#xff…