后端开发教程 - Java、Spring Boot 实战 - msg200.com
5 项非常酷的网络技术，值得了解！🤩
1. Web动画API✨
2. WebRTC
3. Web Speech API 🗣
4. WebXR 设备 API（以前称为 WebVR） 🎮
5. WebSocket 🎛
#DevHumour角落😂
我之前的一些文章
找到我
欢迎阅读我 2021 年的第一篇文章！这次我不会专注于每周写文章，但当然，只要我觉得有必要，我就会继续写一些有用的内容。
好吧好吧，回到正题……
有些 Web 技术你已经了解，而且必须掌握。需要示例吗？JavaScript 库、PWA，甚至是 CSS 子网格，你觉得怎么样？
这些都很常见，在大多数项目中都有使用（好吧，我不太了解子网格）。不过还有一些更酷炫的，你可能听说过，也可能没听说过。
以下是我最近了解到的 5 个，它们可能代表未来，谁知道呢！
1. Web动画API✨
➡️它是什么？
Web Animations API允许开发人员通过借助时间和动画模型同步动画来将动画描述为 DOM 元素。
➡️为什么要使用它？
它结合了CSS动画和过渡无需使用任何外部优化即可为您提供最佳性能。
你可以：
- 同时使用 CSS 或 JavaScript。
- 轻松地将动画从样式表移动到 JavaScript。
- 您不再依赖于将 CSS 属性和范围类写入元素来控制动画的播放。
- 您现在可以动态地设置从属性到持续时间的值。
➡️ 浏览器支持情况如何？
caniuse.com 的说明如下。红色方块表示不支持，绿色方块表示支持。介于两种颜色之间的颜色表示部分支持：
➡️ 代码怎么写？
通常，如果我让你为 HTML 元素编写动画代码，你会执行以下操作：
#element {
animation: animationName infinite 1s linear;
}
@keyframes animationName {
0% {
transform: rotate(0) translate3D(-50%, -50%, 0);
}
50% {
transform: rotate(0) translate3D(-50%, 50%, 0);
}
100% {
transform: rotate(360deg) translate3D(-50%, -50%, 0);
}
}
对于 Web 动画 API，您可以执行以下操作：
// 1. Representing the keyframes
var animationName = [
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)' },
{ transform: 'rotate(360deg) translate3D(-50%, -50%, 0)' }
];
// 2. Representing timing properties
var animTiming = {
duration: 1000,
iterations: Infinity
}
//3. Applying the animation
document.getElementById("element").animate(
animationName,
animTiming
}
➡️我可以在哪里获得更多资源？
除了上面链接的文档之外：
-
让我们来讨论一下Daniel C. Wilson 的Web 动画 API 。
-
Una Kravets 和 Kevin Ellis 对Chromium 84 中的 Web Animations API 进行了改进。
-
Web Animations 的web-animations-js 。
2. WebRTC
➡️它是什么？
WebRTC 或 Web 实时通信是一种技术，它使 Web 应用程序和网站能够存储和传输音频/视频媒体，以及在浏览器之间交换数据，而无需任何插件或第三方软件/工具。
➡️为什么要使用它？
因为它支持：
- 媒体捕获。
- 媒体流。
- 视频和音频会议。
- 文件传输。
- 屏幕共享。
- 与传统设备接口。
➡️ 浏览器支持情况如何？
caniuse.com 的解释如下：
➡️ 代码怎么写？
以下是发送短信的简单示例：
// Signalling the server and greeting a user with a text message
//1. Get the WebSocket library
var WebSocketServer = require('ws').Server;
//2. Create a server at port 8080
var wss = new WebSocketServer({port: 8080});
//3. User connects to the sever
wss.on('connection', function(connection) {
console.log("user connected");
//4. Server gets a message from a connected user
connection.on('message', function(message) {
console.log("Got message from a user:", message);
});
connection.send("Hello from server");
});
➡️我可以在哪里获得更多资源？
除了上面链接的文档之外：
- webrtc 的示例 repo 。
- WebRTC 网站. -通过 Google Codelabs实现与 WebRTC 的实时通信。
3. Web Speech API 🗣
➡️它是什么？
Web Speech API 可让您将语音数据集成到 Web 应用中。它包含两部分：SpeechSynthesis（文本转语音）和 SpeechRecognition（异步语音识别）。
➡️为什么要使用它？
2018 年，谷歌报告称占全球网民总数的 27%正在移动设备上使用语音搜索。
通过语音功能，用户可以通过网站说话来访问他们需要的数据。
➡️ 浏览器支持情况如何？
caniuse.com 的解释如下：
➡️ 代码怎么写？
我真的很喜欢下面这个由 Lindsay Greene 展示语音 API 的例子，请查看这篇文章：
中等的
➡️我可以在哪里获得更多资源？
除了上面链接的文档之外：
-
使用Phil Nash 的Web Speech API 在浏览器中将语音转为文本。
-
Benson Ruan使用 Chrome Web Speech API 将语音转为文本。
4. WebXR 设备 API（以前称为 WebVR） 🎮
➡️它是什么？
WebXR 设备 API实现了 WebXR 功能集的核心，从输出设备的选择、将 3D 场景渲染到所选设备，以及管理使用输入控制器创建的运动矢量。
但是这个 WebXR 是什么？
就像 VR 是虚拟现实一样，AR 是增强现实，MR 是混合现实，类似地WebXR 结合了一组标准，这些标准一起用于支持渲染 VR 的 3D 场景，或为 AR 添加图形图像。
➡️为什么要使用它？
尽管所有这些基于“现实”的技术都开始蓬勃发展，但您仍然需要如下所示的设置（目前还不是很流行）：
尽管如此，启用此功能后您可以：
- 以适当的帧速率渲染 3D 场景。
- 将输出镜像到 2D 显示器。
- 创建表示输入控制移动的矢量。
- 充分利用ARCore等技术的潜力或使用Oculus Rift等硬件。
- 充分利用WebGL丰富的开发工具生态系统和庞大的
➡️ 浏览器支持情况如何？
caniuse.com 的解释如下：
➡️ 代码怎么写？
要访问 WebXR API，我们使用navigator.xr返回对象的当前窗口的属性 XRSystem。
// Initiating the XR interface to use
class App {
...
async init() {
if (navigator.xr && XRSession.prototype.requestHitTest) {
try {
this.device = await navigator.xr.requestDevice();
} catch (e) {
this.onNoXRDevice();
return;
}
} else {
this.onNoXRDevice();
return;
}
document.querySelector('#enter-ar').addEventListener('click', this.onEnterAR);
}
}
➡️我可以在哪里获得更多资源？
除了上面链接的文档之外：
5. WebSocket 🎛
➡️它是什么？
WebSocket API 使得在客户端和服务器之间开启双向交互式通信会话成为可能。
➡️为什么要使用它？
您可以向服务器发送消息并接收事件驱动的响应，而无需轮询服务器以获取回复。因此，您可以在社交信息流、多人游戏、协作环境等场景中使用它。
➡️ 浏览器支持情况如何？
caniuse.com 的解释如下：
➡️ 代码怎么写？
// 1. Create a new WebSocket
var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");
//2. Send data to the server
exampleSocket.send("Text to server");
//3. Closing the connection
exampleSocket.close();
➡️我可以在哪里获得更多资源？
-
使用Spring.io 的WebSocket 构建交互式 Web 应用程序。
-
现代 JavaScript 教程中的WebSocket 。
希望你喜欢这些信息。你可以在下方评论区分享你的想法。
现在……一如既往地，享受表情包吧！😆
#DevHumour角落😂
