前端 socket.io 跨域

news2024/9/9 1:07:51

在使用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.coloradmin.cn/o/1958886.html

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

相关文章

【鸿蒙踩坑记录】解决:tabs滑动时,第一个和最后一个页签回弹大问题

一、背景 tabs滑动切换时,第一个页签右滑回弹大,最后一个页签左滑回弹大,如何关闭回弹效果 二、问题展现 图1:第一个页签右滑时回弹较大 图2:最后一个页签左滑时回弹较大 预期:关闭回弹效果 三、实现思路 给第一个和最后一个…

项目负责人的高效会议策略:从准备到追踪

项目负责人的高效会议策略:从准备到追踪 前言一、会议低效的常见陷阱二、高效会议的准备策略三、会议实施的技巧四、会议追踪的重要性结语 前言 在项目管理的世界里,时间就是金钱,效率就是生命。作为项目负责人,我深刻体会到了会议…

Java网络编程----UDP实现单播,组播,广播

文章开头,先来回忆一下 什么是UDP? UDP 的全称是 User Datagram Protocol,用户数据报协议。它不需要所谓的握手操作,从而加快了通信速度,允许网络上的其他主机在接收方同意通信之前进行数据传输。 UDP 的特点主要有…

Python 教程(七):match...case 模式匹配

目录 专栏列表前言基本语法match 语句case 语句 模式匹配的类型示例具体值匹配类型匹配序列匹配星号表达式命名变量复杂匹配 模式匹配的优势总结 专栏列表 Python教程(一):环境搭建及PyCharm安装Python 教程(二)&…

智能环保气膜网球馆:大空间与防雾霾的完美结合—轻空间

在现代都市生活中,空气质量和空间限制成为许多体育设施的挑战。气膜技术的出现,为这些问题提供了卓越的解决方案。我们的智能环保气膜网球馆,不仅拥有宽敞的空间,还具备卓越的防雾霾功能,为体育爱好者提供了一个理想的…

牧野电火花机床联网

一、找到可选项 选择主面板中的【可选项】按钮,弹出来的对话框如下图所示。 二、属性设定 在左下角部分找到【属性设定】,如序号一所示,在弹出的属性设定对话框中选中【牧野EDM服务器】,如下图所示。 三、选则MES模式 按照上图…

苹果推送iOS 18.1带来Apple Intelligence预览

🦉 AI新闻 🚀 苹果推送iOS 18.1带来Apple Intelligence预览 摘要:苹果向iPhone和iPad用户推送iOS 18.1和iPadOS 18.1开发者预览版Beta更新,带来“Apple Intelligence”预览。目前仅支持M1芯片或更高版本的设备。Apple Intellige…

Electron学习笔记(一)基础环境

目录 前言 基础环境准备 安装 Node.js 配置项目文件 通过代理服务安装 通过国内仓库安装 一些常见问题: 前言 一个新手学习Electron的笔记,记录为主,仅供参考。 其他文章见专栏目录。 基础环境准备 开发之前先将基础环境搭建好。 …

灯具外贸公司用什么企业邮箱好

灯具外贸公司面对海外市场的推广、产品销售、客户沟通、市场信息收集等多重需求,选择一个合适的企业邮箱显得尤为重要。本文将介绍灯具外贸公司为什么应选择Zoho Mail企业邮箱,并详细探讨其优势和功能。 一、公司背景 广东省深圳市光明新区&#xff0c…

创建 Llama-3.1-70B-Japanese-Instruct-2407 的 Ollama 模型

创建 Llama-3.1-70B-Japanese-Instruct-2407 的 Ollama 模型 1. 下载 gguf 文件2. 创建 Modelfile3. 创建 Ollama 模型4. 运行 Ollama 模型5. (可选)其他 Modelfile 1. 下载 gguf 文件 使用浏览器打开 https://huggingface.co/mmnga/Llama-3.1-70B-Japa…

DELL服务器RAID配置详细教程

DELL服务器RAID配置教程 在启动电脑的时候按CTRLR 进入 RAID 设置见面如下图 名称解释: Disk Group:磁盘组,这里相当于是阵列,例如配置了一个RAID5,就是一个磁盘组 VD(Virtual Disk): 虚拟磁盘&#xff…

FFmpeg模块详解:深入理解多媒体框架的构成

😎 作者介绍:欢迎来到我的主页👈,我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun(领取大厂面经等资料),欢迎加我的…

为了人才任正非一个月蹲守人家单位门口,刘备三顾茅庐算啥!

张一鸣说:"一名优秀的CEO首先应该是优秀的HR!”这句话广为流传,此言差矣,一名卓越的创始人首先应该是最卓越的猎头,比如任正非! 全球的创始人也没几个人能够做像任正非那样重视人才的,一旦…

成为git砖家(7): posh-git的安装和使用

文章目录 1. PowerShell 里的 git 默认使用体验不够好2. posh-git 介绍2.1 安装 posh-git2.2 PS1 显示的内容2.3 补全分支 1. PowerShell 里的 git 默认使用体验不够好 在 Windows 系统上,安装了 git for windows 后, git bash 里的体验确实不错。 但是…

【云原生】kubernetes弃用docker,containerd风华正茂,何以承载云原生?

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

JAVA基础 - 泛型

目录 一. 简介 二. 集合泛型 三. 自定义泛型 四. 自定义泛型类和普通类的区别 一. 简介 泛型是 Java 语言中一种强大的特性,它允许在定义类、接口和方法时使用类型参数,从而增加了代码的类型安全性和复用性。 类型安全性: 使用泛型可以…

leetcode日记(60)编辑距离

感觉这题不是按难度划分的而是按代码长度划分的…看了答案才知道怎么做,其实思路很简单,但是特别难想…… 意思是使用动态规划,依次计算由word1的前i个字母到word2的前j个字母要经历的最小变化数。 min D[i][j]min(D[i-1][j]1,D[i][j-1]1,D…

spring 中包自动扫描之 component-scan 解析

在 spring 中&#xff0c;为简化 bean 的配置&#xff0c;在 spring-context 模块下提供了包的自动扫描功能&#xff0c;将配置的包及其子包下的所有符合条件的类都注册到 BeanFactory 中。下面来看下具体是怎么实现的。 配置 <context:component-scan base-package"…

【MIT 6.5840(6.824)学习笔记】Raft

1 脑裂 许多容错系统使用一个单主节点来决定主副本。 MapReduce&#xff1a;由单主节点控制计算复制。GFS&#xff1a;主备复制数据&#xff0c;并由单主节点确定主拷贝的位置。VMware FT&#xff1a;主虚机和备份虚机之间复制指令&#xff0c;需要单点的Test-and-Set服务确认…