Node.js 和浏览器环境中都使用 WebSocket

使用WebSocket为什么不适配双端

浏览器环境本身就支持 WebSocket,直接使用 JavaScript 内置的 WebSocket 对象来建立连接。
Node中本身并没有内置 WebSocket 协议的支持,所以需要使用第三方库 ws来实现 WebSocket 功能。

一. 使用跨平台 WebSocket 库

选择 isomorphic-wsuniversal-websocket-client 这些跨平台的 WebSocket 库。根据运行环境自动选择合适的 WebSocket 实现,从而在 Node.js浏览器环境中都能正常工作。

例如,使用 isomorphic-ws,代码实现:

javascript
// 在 Node.js 和浏览器环境中都使用相同的代码
import { WebSocket } from 'isomorphic-ws';const socket = new WebSocket('ws://example.com');

二. 根据环境选择不同的 WebSocket 实现

if (typeof window !== 'undefined') {// 浏览器环境let socket: WebSocket;console.log('浏览器环境');socket = new WebSocket('ws://localhost:8080');// 连接成功时触发socket.onopen = () => {console.log('WebSocket 连接成功');};// 接收消息时触发socket.onmessage = (event) => {console.log('收到服务器消息:', event.data);if (typeof event.data === 'string') {const data = JSON.parse(event.data);}};// 连接关闭时触发socket.onclose = () => {console.log('WebSocket 连接关闭');};// 错误时触发socket.onerror = (error) => {console.error('WebSocket 连接错误:', error);};
} else {// Node.js 环境const WebSocket = require('ws');let socket = null;socket = new WebSocket('ws://localhost:8080');socket.on('open', () => {console.log('Connected to server');});socket.on('message', (message: string) => {console.log(`Received message: ${message}`);if (typeof message === 'string') {const data = JSON.parse(message);console.log(data)}});socket.on('close', () => {console.log('Disconnected from server');});
}

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

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

相关文章

2.树莓派4b+ubuntu18.04(ros版本melodic)+arduino mega自制两轮差速小车,实现建图导航功能

这篇文章介绍arduino使用和安装arduino_bridge 将arduino与树莓派连接 查看arduino的端口号,我们这里查看到的时ttyUSB0 ll /dev/ttyUSB*将当前用户添加进dialout组 sudo usermod -a -G dialout your_user_name然后重启树莓派,然后才能生效 然后如果你…

PyCharm2024 for mac Python编辑开发

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件(适合自己的M芯片版或Intel芯片版),将其从左侧拖入右侧文件夹中,等待安装完毕2、应用程序显示软件图标,表示安装成功3、打开访达,点击【文…

网络安全筑基篇——反序列化漏洞

目录 序列化是什么? 反序列化又是什么? 反序列化漏洞的危害 代码样例 常见的魔术方法 修复方式有哪些? 常见的反序列化漏洞 Shiro反序列化漏洞 Fastjson反序列化漏洞 序列化是什么? 将实例化对象转换成字节流的过程 反序…

Harmony OS UI框架探索笔记

本文探讨了如何将现有的常用架构理论与Arkts和ArkUI结合起来,使代码更有条理,并利用Previewer快速调整布局,同时在不改变代码的情况下运行显示真实数据。 开发环境 Windows 11DevEco Studio 4.0 ReleaseBuild Version: 4.0.0.600, built on…

机器人控制系列教程之URDF自动生成工具

URDF文件的编写较为复杂,ROS官方提供了URDF的SolidWorks插件,可方便地将 SW 零件和装配体导出为 URDF 文件。导出器将创建一个类似 ROS 的软件包,其中包含网格、纹理和机器人(URDF 文件)目录。对于单一的 SolidWorks 零…

API-回调函数

学习目标: 掌握回调函数 学习内容: 回调函数小结综合案例 回调函数: 如果将函数A做为参数传递给函数B时,我们称函数A为回调函数。 简单理解:当一个函数当作参数来传递给另外一个函数的时候,这个函数就是…

遗传编程(Genetic Programming, GP)和大规模语言模型(Large Language Models, LLMs)的相似之处

遗传编程(Genetic Programming, GP)和大规模语言模型(Large Language Models, LLMs)虽然在实现和用途上有所不同,但也有一些相似之处: 相似之处 自动化生成: GP:自动生成程序或表达…

DM达梦数据库函数分析(与oracle相应函数区别及用法分析)

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝💝💝如有需要请大家订阅我的专栏【数据库系列】哟!我会定期更新相关系列的文章 💝💝💝关注!关注!!请…

Python生成图形验证码

文章目录 安装pillow基本用法生成代码 安装pillow pip install pillow 基本用法 特殊字体文字 如下所示,将下载下来的ttf字体文件放到py文件同一文件夹下 分享一个免费下载字体网站:http://www.webpagepublicity.com/free-fonts.html 我选的字体是Baj…

探索AI的巅峰:详解GPT-3.5与GPT-4系列模型的区别

人工智能领域不断涌现出令人惊叹的技术突破,其中OpenAI的ChatGPT系列模型尤为引人注目。随着GPT-4的发布,技术开发者们对比分析其与前一代GPT-3.5的差异显得尤为重要。本文将深入探讨GPT-3.5和GPT-4系列模型的主要区别,帮助大家更好地理解和应…

Linux 基于sqlite3数据库的学生管理系统

一、数据库 sqlite官网:www.sqlite.org 1.1 数据库的安装 离线安装: sudo dpkg -i sqlite3_3.22.0-1ubuntu0.4_amd64.deb //数据库软件 sudo dpkg -i libsqlite3-dev_3.22.0-1ubuntu0.4_amd64.deb //数据库的库函数 在线安装: sudo apt-get …

推荐系统三十六式学习笔记:原理篇.模型融合13|经典模型融合办法:线性模型和树模型的组合拳

目录 为什么要融合?“辑度组合”原理逻辑回归梯度提升决策树GBDT二者结合 总结 推荐系统在技术实现上一般划分为三个阶段:挖掘、召回、排序 。 为什么要融合? 挖掘的工作是对用户和物品做非常深入的结构化分析,各个角度各个层面…

MySQL之可扩展性(六)

可扩展性 向外扩展 12.重新均衡分片数据 如有必要,可以通过在分片间移动数据来达到负载均衡。举个例子,许多读者可能听一些大型图片分享网站或流行社区网站的开发者提到过用于分片间移动用户数据的工具。在分片间移动数据的好处很明显。例如&#xff…

学生表的DDL和DML

DDL -- 创建学生表 CREATE TABLE students (student_id INT PRIMARY KEY AUTO_INCREMENT,studentname VARCHAR(50),age INT,gender VARCHAR(10) );-- 创建课程表 CREATE TABLE courses (course_id INT PRIMARY KEY AUTO_INCREMENT,course_name VARCHAR(50) );-- 创建教师表 CR…

鸿蒙开发设备管理:【@ohos.batteryInfo (电量信息)】

电量信息 该模块主要提供电池状态和充放电状态的查询接口。 说明: 本模块首批接口从API version 6开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import batteryInfo from ohos.batteryInfo;属性 描述电池信息。 系统能…

NLP经典论文研读--xlnet论文代码复现记录

xlnet源码解读(简易pytorch实现版本) xlnet这个模型还是相当复杂的,我看了很长一段时间也还是有很多地方没有搞明白,最后又在网上搜了很多大佬写的相关博客,才算是大致弄明白了,想了解xlnet的原理,请参考原论文&#…

(2024,RNN,梯度消失和爆炸,记忆诅咒,重参数化和动态学习率,权重矩阵对角化,复值 RNN)梯度消失和爆炸并不是故事的结局

Recurrent neural networks: vanishing and exploding gradients are not the end of the story 公和众与号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0. 摘要 1. 梯度消失和梯度爆炸 2. 记…

%运算符

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法介绍 在python中,可以使用%运算符进行灵活多样的格式化处理,通用的语法格式为: (格式模板&…

【面试系列】C#高频面试题

欢迎来到我的博客,很高兴能够在这里和您见面!欢迎订阅相关专栏: ⭐️ 全网最全IT互联网公司面试宝典:收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来:详细讲解AIGC的概念、核心技术、…

面试突击:ArrayList源码详解

本文已收录于:https://github.com/danmuking/all-in-one(持续更新) 前言 哈喽,大家好,我是 DanMu。ArrayList 是我们日常开发中不可避免要使用到的一个类,并且在面试过程中也是一个非常高频的知识点&#…