Vite的WebSocket

Vite的webSocket

  • Socket
    • Java Socket
      • 概述
      • 工作原理
      • 优势
      • 劣势
    • Java WebSocket
      • 概述
      • 工作原理
      • 代码示例
      • nodeJS WebSocket
      • 优势
      • 劣势
    • vite中的WebSocket💫
      • 代码示例
      • 使用vite进行创建服务器并对Vue实行HMR
    • 总结

Socket

Java 中的 Socket 与 WebSocket 都用于网络通信,但它们有不同的用途和实现方式。下面是 Java 的 Socket 和 WebSocket 的区别及其应用场景。

Java Socket

概述

Socket:Socket 是传统的网络通信方式,使用 TCP(传输控制协议)或 UDP(用户数据报协议)进行点对点通信。
API:Java 提供了 java.net 包中的 Socket 类和 ServerSocket 类来实现客户端和服务器之间的通信。

工作原理

建立连接:

客户端:创建一个 Socket 对象,连接到指定的服务器和端口。
服务器:创建一个 ServerSocket 对象,绑定到指定的端口,并监听客户端的连接请求。
数据传输:连接建立后,客户端和服务器可以通过输入输出流 (InputStream 和 OutputStream) 进行数据传输。

关闭连接:通信结束后,客户端和服务器都需要关闭连接。

####代码示例
客户端代码

import java.io.*;
import java.net.*;public class Client {public static void main(String[] args) {try {Socket socket = new Socket("localhost", 8080);PrintWriter out = new PrintWriter(socket.getOutputStream(), true);BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));out.println("Hello Server");System.out.println("Server says: " + in.readLine());in.close();out.close();socket.close();} catch (IOException e) {e.printStackTrace();}}
}

服务器代码

import java.io.*;
import java.net.*;public class Server {public static void main(String[] args) {try {ServerSocket serverSocket = new ServerSocket(8080);System.out.println("Server is listening on port 8080");while (true) {Socket clientSocket = serverSocket.accept();System.out.println("Client connected");PrintWriter out = new PrintWriter(clientSocket.getOutputStream(), true);BufferedReader in = new BufferedReader(new InputStreamReader(clientSocket.getInputStream()));String message = in.readLine();System.out.println("Client says: " + message);out.println("Hello Client");in.close();out.close();clientSocket.close();}} catch (IOException e) {e.printStackTrace();}}
}

优势

低级控制:提供了对网络通信的底层控制,可以定制化通信协议。
灵活性:支持各种协议(如 TCP 和 UDP)和各种应用场景。

劣势

复杂性:需要手动处理连接的建立、数据的传输和连接的关闭。
实时性:不适合需要实时双向通信的场景,如实时聊天和在线游戏。

Java WebSocket

概述

WebSocket:WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,适用于需要实时通信的 Web 应用。
API:Java 提供了 javax.websocket 包来实现 WebSocket 客户端和服务器。

工作原理

建立连接:

客户端向服务器发送一个 HTTP 请求,要求将连接升级为 WebSocket 连接。
握手:服务器同意升级连接,并返回一个 101 Switching Protocols 状态码。
数据传输:连接建立后,客户端和服务器可以在单个连接上相互发送文本或二进制数据包。

关闭连接:任何一方都可以随时关闭连接。

代码示例

客户端代码

import javax.websocket.*;
import java.net.URI;@ClientEndpoint
public class WebSocketClient {@OnOpenpublic void onOpen(Session session) {System.out.println("Connected to server");session.getAsyncRemote().sendText("Hello Server");}@OnMessagepublic void onMessage(String message) {System.out.println("Server says: " + message);}@OnClosepublic void onClose(Session session, CloseReason closeReason) {System.out.println("Connection closed: " + closeReason);}public static void main(String[] args) {WebSocketContainer container = ContainerProvider.getWebSocketContainer();try {URI uri = new URI("ws://localhost:8080/websocket");container.connectToServer(WebSocketClient.class, uri);} catch (Exception e) {e.printStackTrace();}}
}

服务端

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;@ServerEndpoint("/websocket")
public class WebSocketServer {@OnOpenpublic void onOpen(Session session) {System.out.println("Client connected");}@OnMessagepublic void onMessage(String message, Session session) {System.out.println("Client says: " + message);try {session.getBasicRemote().sendText("Hello Client");} catch (IOException e) {e.printStackTrace();}}@OnClosepublic void onClose(Session session, CloseReason closeReason) {System.out.println("Connection closed: " + closeReason);}
}

nodeJS WebSocket

在浏览器端,使用 WebSocket 非常简单。现代浏览器都内置了 WebSocket 支持。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');// 连接打开事件
socket.addEventListener('open', function (event) {console.log('WebSocket is open now.');// 发送数据到服务器socket.send('Hello Server!');
});// 监听消息事件
socket.addEventListener('message', function (event) {console.log('Message from server ', event.data);
});// 监听关闭事件
socket.addEventListener('close', function (event) {console.log('WebSocket is closed now.');
});// 监听错误事件
socket.addEventListener('error', function (event) {console.error('WebSocket error observed:', event);
});

使用 ws 库可以轻松实现 WebSocket 服务器。

const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {console.log('Client connected');// 监听消息事件ws.on('message', function incoming(message) {console.log('received: %s', message);// 发送消息给客户端ws.send('Hello from server');});// 监听关闭事件ws.on('close', function close() {console.log('Client disconnected');});
});

优势

实时通信:提供了低延迟的双向通信(全双工通信),适合需要实时交互的应用。
简化开发:API 更高层次,封装了连接建立、数据传输和连接关闭的细节。
高效性:在建立连接后,数据帧的开销较小,适合频繁的数据交换。

劣势

依赖 Web 环境:通常用于 Web 应用,需要在支持 WebSocket 的环境中使用。
较高资源消耗:持久连接会占用服务器资源。
防火墙问题:有些防火墙和代理服务器可能会阻止 WebSocket 连接。

vite中的WebSocket💫

Vite 提供了一种快速开发体验,其中包括浏览器的自动刷新(热模块替换,HMR)。Vite 内部通过 WebSocket 实现了这一功能,当代码发生变化时,Vite 会通知浏览器进行刷新。

主要步骤

1.启动 WebSocket 服务器:
Vite 在开发服务器启动时,会创建一个 WebSocket 服务器,监听文件变化。
2.文件变化检测:
当文件发生变化时,Vite 会检测到并通知 WebSocket 服务器。
3.通知浏览器:
WebSocket 服务器会将文件变化的消息推送到连接的浏览器客户端。
4.浏览器处理变化:
浏览器通过 WebSocket 接收到消息后,会根据变化类型进行处理,如重新加载模块或刷新页面。

代码示例

下面是 Vite 内部的一些关键代码,展示了如何实现这些步骤。注意,这只是简化的示例代码。

//启动服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });wss.on('connection', (ws) => {console.log('Client connected');ws.on('message', (message) => {console.log('Received:', message);});
});
//监听文件变化
const chokidar = require('chokidar');
const watcher = chokidar.watch('./src');watcher.on('change', (path) => {console.log(`File ${path} has been changed`);broadcast({ type: 'reload', path });
});function broadcast(data) {wss.clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(JSON.stringify(data));}});
}
//在浏览器端,Vite 会注入一些客户端代码来处理 WebSocket 消息。
const socket = new WebSocket('ws://localhost:3000');socket.addEventListener('message', (event) => {const data = JSON.parse(event.data);if (data.type === 'reload') {location.reload();}
});

使用vite进行创建服务器并对Vue实行HMR

//开启一个服务
import { createServer } from 'vite';const server = createServer({server: {port: 3000}
});server.listen();
//使用 @vitejs/plugin-vue 插件实现 Vue 组件的 HMR:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
});

总结

  • WebSocket 为 Web 应用提供了一种高效的实时通信方式,适用于各种需要低延迟数据传输的场景。通过简单的 API,开发者可以轻松实现 -WebSocket 的客户端和服务器,并创建各种实时交互应用。
  • Java Socket:适合需要低级别控制和灵活性较高的网络通信场景,如文件传输、远程控制等。
  • Java/node WebSocket:适合需要实时双向通信的 Web 应用,如实时聊天、在线游戏等。

选择使用哪种技术取决于具体的应用需求和场景

  • 如果需要传统的点对点通信和更多的协议支持,Java Socket 是更好的选择;
  • 如果需要实时双向通信和简化的开发体验,Java WebSocket 更加适合。

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

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

相关文章

微服务设计原则——高性能:锁

文章目录 1.锁的问题2.无锁2.1 串行无锁2.2 无锁数据结构 3.减少锁竞争参考文献 1.锁的问题 高性能系统中使用锁,往往带来的坏处要大于好处。 并发编程中,锁带解决了安全问题,同时也带来了性能问题,因为锁让并发处理变成了串行操…

海外营销推广:快速创建维基百科(wiki)词条-大舍传媒

一、维基百科的永久留存问题 许多企业和个人关心维基百科是否能永久留存。实际上,只要企业和个人的行为没有引起维基百科管理方的反感,词条就可以长期保存。如果有恶意行为或被投诉,维基百科可能会对词条进行删除或修改。 二、创建维基百科…

详细解析Kafaka Streams中各个DSL操作符的用法

什么是DSL? 在Kafka Streams中,DSL(Domain Specific Language)指的是一组专门用于处理Kafka中数据流的高级抽象和操作符。这些操作符以声明性的方式定义了数据流的转换、聚合、连接等处理逻辑,使得开发者可以更加专注…

PF4J+SpringBoot

plugin-common pom.xml相关配置 <groupId>pub.qingyun</groupId> <artifactId>plugin-common</artifactId> <version>0.0.1-SNAPSHOT</version> <description>插件配置类</description><dependency><groupId>or…

TCP与UDP网络编程

网络通信协议 java.net 包中提供了两种常见的网络协议的支持: UDP&#xff1a;用户数据报协议(User Datagram Protocol)TCP&#xff1a;传输控制协议(Transmission Control Protocol) TCP协议与UDP协议 TCP协议 TCP协议进行通信的两个应用进程&#xff1a;客户端、服务端 …

好玩的调度技术-场景编辑器

好玩的调度技术-场景编辑器 文章目录 好玩的调度技术-场景编辑器前言一、演示一、代码总结好玩系列 前言 这两天写前端写上瘾了&#xff0c;顺手做了个好玩的东西&#xff0c;好玩系列也好久没更新&#xff0c;正好作为素材写一篇文章&#xff0c;我真的觉得蛮好玩的&#xff…

编程中的智慧之设计模式一

设计模式&#xff1a;编程中的智慧之道 设计模式是软件开发中的一种解决方案&#xff0c;提供了在特定上下文中解决常见问题的模板。这些模式帮助我们构建更加灵活、可维护和可扩展的系统。本文将探讨设计模式的不同类型及其在Java中的应用。 设计模式的层次 设计模式可以类…

【C#】Array和List

C#中的List<T>和数组&#xff08;T[]&#xff09;在某些方面是相似的&#xff0c;因为它们都是用来存储一系列元素的集合。然而&#xff0c;它们在功能和使用上有一些重要的区别&#xff1a; 数组&#xff08;Array&#xff09; 固定大小&#xff1a;数组的大小在声明时…

LinuxShell编程1———shell基础命令

文章目录 前言 一、shell基础知识 1、shell概念 2、Shell的功能 接收&#xff1a;用户命令 调用&#xff1a;相应的应用程序 解释并交给&#xff1a;内核去处理 返还&#xff1a;内核处理结果 3、Shell种类&#xff08;了解&#xff09; 3.1、MS-DOS 3.2、Windows的…

数据的守护者:深入解析 Elasticsearch 的副本机制

标题&#xff1a;数据的守护者&#xff1a;深入解析 Elasticsearch 的副本机制 在分布式搜索引擎 Elasticsearch 中&#xff0c;副本是确保数据高可用性和查询性能的关键特性。通过副本机制&#xff0c;Elasticsearch 能够在集群中复制数据&#xff0c;从而提高数据的可靠性和…

高并发服务器-使用多进程(Multi-Process)实现【C语言】

在上期的socket套接字的使用详解中&#xff08;socket套接字的使用详解&#xff09;最后实现的TCP服务器只能处理一个客户端的请求发送&#xff0c;当有其他客户端请求连接时会被阻塞。为了能同时处理多个客户端的连接请求&#xff0c;本期使用多进程的方式来解决。 解决方案步…

SDF学习笔记整理

1 SDF的用处 SDF文件是标准延时文件&#xff0c;该文件由于其扩展名为.sdf即filename.sdf故被常叫做SDF文件。该文件是综合吐出的文件&#xff0c;也可以来自于静态时序分析&#xff08;STA&#xff09;&#xff0c;前者称为pre_sdf文件&#xff0c;后者称为post_sdf。 两者主…

R语言进行K折交叉验证问题

在使用R语言进行模型参数评估优化时候&#xff0c;会使用K折交叉验证&#xff0c;其中会遇到各种各样问题&#xff1a; 错误: C5.0 models require a factor outcome > (1-mean(E0));(1-mean(E1)) [1] 1 [1] 1 报错说明C5.0模型需要因子变量输出&#xff0c;源代码如下&am…

无人机技术优势及发展详解

一、技术优势 无人机&#xff08;Unmanned Aerial Vehicle&#xff0c;UAV&#xff09;作为一种新兴的空中智能平台&#xff0c;凭借其独特的技术优势&#xff0c;已经在众多领域中展现出强大的应用潜力和实用价值。以下是无人机的主要技术优势&#xff1a; 1. 自主导航与远程…

Java 程序员面试笔记 - 数据库

12.1 SQL DML&#xff1a;插入数据、修改数据和删除数据。 DDL&#xff1a;数据定义语句&#xff0c;可以对数据库用户、基本表、视图等进行定义和撤销。 DCL&#xff1a;用于对数据库进行统一的控制管理。 12.2 内连接与外连接 内链接&#xff1a;两个表匹配的数据才出现…

【Harmony】SCU暑期实训鸿蒙开发学习日记Day2

目录 Git 参考文章 常用操作 ArkTS的网络编程 Http编程 发送请求 GET POST 处理响应 JSON数据解析 处理响应头 错误处理 Web组件 用生命周期钩子实现登录验证功能 思路 代码示例 解读 纯记录学习日记&#xff0c;杂乱&#xff0c;误点的师傅可以掉了&#x1…

How to integrate GPT-4 model hosted on Azure with the gptstudio package

题意&#xff1a;怎样将托管在Azure上的GPT-4模型与gptstudio包集成&#xff1f; 问题背景&#xff1a; I am looking to integrate the OpenAI GPT-4 model into my application. Here are the details I have: Endpoint: https://xxxxxxxxxxxxxxx.openai.azure.com/Locatio…

【前端】SpringBootWeb 篇-入门了解 Spring Cache、Spring Task与WebSocket 框架

在SpringBootWeb开发中&#xff0c;Spring Cache、Spring Task与WebSocket框架是三个非常重要的组件&#xff0c;它们分别用于缓存管理、任务调度和实时通信。以下是对这三个框架的入门了解&#xff1a; 一、Spring Cache 1. 简介 Spring Cache是Spring框架提供的缓存抽象&a…

LG 选择 Flutter 来增强其智能电视操作系统 webOS

可以这个话题会让大多数人困惑&#xff0c;2024 年了为什么还会冒出 webOS 这种老古董&#xff1f;然后 LG 为什么选择 webOS &#xff1f;现在为什么又选择 Flutter &#xff1f; 其实早在 Google I/O 发布 Flutter 3.22 版本的时候&#xff0c;就提到了 LG 选择 Flutter 来增…

tinymce富文本支持word内容同时粘贴文字图片上传 vue2

效果图 先放文件 文件自取tinymce: tinymce富文本简单配置及word内容粘贴图片上传 封装tinymce 文件自取&#xff1a;tinymce: tinymce富文本简单配置及word内容粘贴图片上传 页面引用组件 <TinymceSimplify refTinymceSimplify v-model"knowledgeBlockItem.content…