当前位置: 首页 > news >正文

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.lryc.cn/news/388211.html

相关文章:

  • css美化滚动条样式
  • 由浅入深,走进深度学习(补充篇:转置卷积和FCN)
  • Linux基础篇——目录结构
  • 星际编码:Swifter.Json,.NET宇宙中的数据处理新星
  • python 压缩数据
  • nacos在k8s上的集群安装实践
  • 数据结构—判断题
  • 树莓派挂载的移动硬盘badblocks坏道屏蔽,以这个为准
  • Unity开箱即用的UGUI面板的拖拽移动功能
  • 春秋云境:CVE-2022-25411[漏洞复现]
  • java基础知识点全集
  • 如何完成域名解析验证
  • 2024年6月个人工作生活总结
  • Json与Java类
  • 动手学深度学习(Pytorch版)代码实践 -计算机视觉-39实战Kaggle比赛:狗的品种识别(ImageNet Dogs)
  • 在Linux系统中挂载硬盘
  • 安卓短视频去水印v1.7 简洁好用
  • 【征服数据结构】:期末通关秘籍
  • GIT 基于master分支创建hotfix分支的操作
  • Vue-CLI脚手架与node.js安装
  • 自适应站长跑路单页网站源码
  • Java基础(判断和循环)
  • 51单片机第12步_使用stdio.h库函数仿真串口通讯
  • simulink-esp32开发foc电机
  • Python教程--基本技能
  • 干货分享:Spring中经常使用的工具类(提示开发效率)
  • 一文讲懂npm link
  • 观成科技:证券行业加密业务安全风险监测与防御技术研究
  • 使用Swoole开发高性能的Web爬虫
  • 【Elasticsearch】Elasticsearch索引创建与管理详解