Django Web中的静态文件之HTML5第1篇

从小程序出来以后，H5更是火上加油,大热了一把。没错，小程序就是居于H5开发出来的。可惜咱们这次讲的不是小程序，而是讲HTML5，简称H5。

H5中的5，是版本号来的，它在HTML4的基础上，进行了大大的优化。

1

H5去掉了HTML4上的鸡肋标签，如：<acronym>、<acronym>、<big>、

<basefont>、<center>、<dir>、<frame>、<frameset>、<noframes>等。新增了很多丰富的功能标签。

以往需要借助第3方插件,如Flash ,才能实现的音频和视频功能，如今用HTML5<audio>、<video>标签便可实现。

以上在Web上无法直接实现通讯的功能，如今用HTML5的WebSocket也可以实现了…

2

光说不练假把式，来点代码试试，实现MP4的播放。视频来源，自己随便在网上找一个，建议找个短视频，否则只顾欣赏影片，无心学习去了。

<!DOCTYPE html>

<html>

<body>

</video>

</body>

</html>

需要在应用程序中实现实时通信时，WebSocket是一个强大的协议，它可以在客户端和服务器之间建立持久的双向通信通道。本文将向您展示如何在Spring Boot应用程序中集成WebSocket，实现实时通信的功能。

介绍

WebSocket是一种网络通信协议，能在单个TCP连接上进行全双工通信。WebSocket通信协议于2011年被IETF定为标准RFC 6455，WebSocket API被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要做一次握手，两者之间就直接可以创建持久性连接并进行数据传输。

WebSocket原理

WebSocket是HTML5中的一个新特性。它实现了浏览器与服务器全双工通信(full-duplex)。一开始，WebSocket只是浏览器和服务器之间的一个简单的TCP连接。当连接建立后，服务器和浏览器都能主动向对方发送数据。

WebSocket连接的过程包括以下几个步骤：

1.客户端发送一个特殊的HTTP请求到服务器，这个请求中包含了一个“Upgrade: WebSocket”头。

2.服务器发送一个101响应，告诉客户端其正在切换到WebSocket协议。

3.一旦连接建立，客户端和服务器就可以任意地发送和接收数据，而不需要像HTTP请求那样，每次都需要对方的响应。

实现步骤

以下是在Spring Boot中集成WebSocket并实现实时通信的详细步骤：

步骤1：创建Spring Boot项目

首先，创建一个Spring Boot项目。您可以使用Spring Initializr或手动创建项目。

步骤2：添加WebSocket依赖

在`pom.xml`文件中添加WebSocket依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

步骤3：创建WebSocket配置类**

创建一个WebSocket配置类，用于配置WebSocket的端点和处理程序。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

步骤4：创建WebSocket处理程序

创建一个WebSocket处理程序，处理WebSocket连接和消息。

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")
public class MyWebSocket {
    @OnOpen
    public void onOpen(Session session) {
        // 当客户端连接时执行
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 当接收到客户端消息时执行
    }

    @OnClose
    public void onClose(Session session) {
        // 当客户端断开连接时执行
    }

    @OnError
    public void onError(Throwable error) {
        // 发生错误时执行
    }
}

步骤5：前端页面

在前端页面中，您可以使用JavaScript和WebSocket API来建立WebSocket连接，并发送和接收消息。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
</head>
<body>
    <script>
        var socket = new WebSocket("ws://localhost:8080/websocket");

        socket.onopen = function(event) {
            // 连接成功时执行
        };

        socket.onmessage = function(event) {
            var message = event.data;
            // 接收到消息时执行
        };

        socket.onclose = function(event) {
            // 连接关闭时执行
        };

        socket.onerror = function(error) {
            // 发生错误时执行
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);
        }
    </script>

    <input type="text" id="message">
    <button onclick="sendMessage()">Send</button>
</body>
</html>

优点

使用WebSocket实现实时通信有以下优点：

1. 实时性：与传统的HTTP请求-响应模式不同，WebSocket允许即时发送和接收数据，实现实时性。

2. 降低延迟：WebSocket连接保持打开状态，无需为每个请求建立新的连接，可以减少通信的延迟。

3. 减少资源消耗：相比轮询或长轮询，WebSocket连接更高效，减少服务器资源消耗。

4. 双向通信：WebSocket支持双向通信，客户端和服务器都可以主动发送消息。

适用场景

WebSocket是一种强大的协议，适用于许多实时通信和互动应用场景。以下是一些适用WebSocket的常见场景：

1. 即时聊天应用程序：WebSocket是构建即时聊天应用程序的理想选择。它允许用户实时发送和接收消息，支持私聊、群聊、在线状态等功能。许多在线聊天应用程序如Slack、WhatsApp、Facebook Messenger等都使用WebSocket来实现实时通信。

2. 在线游戏：多人在线游戏(MMOG)通常需要实时的游戏状态同步和玩家之间的实时互动。WebSocket可以用于在游戏客户端和服务器之间实现实时通信，确保游戏体验更加流畅和有趣。

3. 实时协作工具：协作工具和团队合作平台，如Google Docs、Microsoft Teams等，需要支持多人同时编辑和实时协作。WebSocket可用于同步用户的编辑操作，确保协作工作在实时性方面表现出色。

4. 实时数据监控和通知：监控和控制系统需要实时获取传感器数据、日志信息或事件通知。WebSocket可以用于推送实时数据和事件通知，使操作员能够及时采取行动。

5. 在线教育和远程培训：在线教育平台需要实时互动，包括教师和学生之间的语音、视频、文档共享和实时提问。WebSocket可以提供良好的实时互动体验。

6. 金融市场数据：金融市场需要实时传输股票价格、货币汇率等数据。WebSocket可用于向交易员提供实时数据更新，以便他们做出即时决策。

7. 社交媒体和新闻推送：社交媒体平台和新闻网站可以使用WebSocket向用户推送最新的帖子、评论、新闻和通知，使用户保持更新。

8. 实时地理位置跟踪：实时地理位置跟踪应用程序，如共享单车、地图导航、物流追踪等，需要将实时位置信息传输给服务器并实时显示给用户。

总之，WebSocket适用于需要实时通信和互动的各种应用场景。它可以改善用户体验，提高应用程序的实时性，并支持多种实时功能。使用WebSocket，您可以构建更加动态和交互性的Web应用程序。

总结

WebSocket是一种强大的协议，可以实现实时通信，适用于多种应用场景。通过Spring Boot的支持，您可以轻松集成WebSocket，并在应用程序中实现实时通信功能。WebSocket的优点包括实时性、降低延迟、减少资源消耗和双向通信。希望本文对您理解Spring Boot集成WebSocket和实时通信有所帮助，为您的应用程序增加更多交互和实时性。开始使用WebSocket，让您的应用程序更加互动！

ebSocket 和 Socket 的区别就像Java和JavaScript，并没有什么太大的关系，但又不能说完全没关系。可以这么说：

命名方面，Socket是一个深入人心的概念，WebSocket借用了这一概念；
使用方面，完全两个东西。

Java和JavaScript的关系

当我们探讨两件事物的区别和联系时，我们想探讨些什么？

对这个问题最直接的解决方法应该是去了解Socket和WebSocket的来源和用法，那么它们的区别和联系就不言自明了。

Socket

Socket可以有很多意思，和IT较相关的本意大致是指在端到端的一个连接中，这两个端叫做Socket。对于IT从业者来说，它往往指的是TCP/IP网络环境中的两个连接端，大多数的API提供者（如操作系统，JDK）往往会提供基于这种概念的接口，所以对于开发者来说也往往是在说一种编程概念。同时，操作系统中进程间通信也有Socket的概念，但这个Socket就不是基于网络传输层的协议了。

Unix 中的 Socket

操作系统中也有使用到Socket这个概念用来进行进程间通信，它和通常说的基于TCP/IP的Socket概念十分相似，代表了在操作系统中传输数据的两方，只是它不再基于网络协议，而是操作系统本身的文件系统。

网络中的 Socket

通常所说的Socket API，是指操作系统中（也可能不是操作系统）提供的对于传输层（TCP/UDP）抽象的接口。现行的Socket API大致都是遵循了BSD Socket规范（包括Windows）。这里称规范其实不太准确，规范其实是POSIX，但BSD Unix中对于Socket的实现被广为使用，所以成为了实际的规范。如果你要使用HTTP来构建服务，那么就不需要关心Socket，如果你想基于TCP/IP来构建服务，那么Socket可能就是你会接触到的API。

在TCP/IP网络中HTTP的位置

从上图中可以看到，HTTP是基于传输层的TCP协议的，而Socket API也是，所以只是从使用上说，可以认为Socket和HTTP类似（但一个是成文的互联网协议，一个是一直沿用的一种编程概念），是对于传输层协议的另一种直接使用，因为按照设计，网络对用户的接口都应该在应用层。

Socket 名称的由来

和很多其他Internet上的事物一样，Socket这个名称来自于大名鼎鼎的ARPANET（Advanced Research Projects Agency），早期ARPANET中的Socket指的是一个源或者目的地址——大致就是今天我们所说的IP地址和端口号。最早的时候一个Socket指的是一个40位的数字（RFC33中说明了此用法，但在RFC36中并没有明确地说使用40位数字来标识一个地址），其中前32为指向的地址（socket number，大致相当于IP），后8位为发送数据的源（link，大致相当于端口号）。对他们的叫法有很多的版本，这里列举的并不严谨。

领取C++音视频开发学习资料：点击→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

端口号的野史

随着ARPANET的发展，后来（RFC433，Socket Number List）socket number被明确地定义为一个40位的数字，其中后8位被用来制定某个特定的应用使用（比如1是Telnet）。这8位数有很多名字：link、socket name、AEN（another eight number，看到这个名字我也是醉了），工程师逗逼起来也是挺拼的。

后来在Internet的规范制定中，才真正的用起了port number这个词。至于为什么端口号是16位的，我想可能有两个原因，一是对于当时的工程师来说，如果每个端口号来标识一个程序，65535个端口号也差不多够用了。二可能是为了对齐吧，^_^!!。

Socket 原本的意思

在上边提到的历史中使用到的Socket，包括TCP文档中使用到的Socket，其实指的是网络传输中的一端，是一个虚拟化的概念。

WebSocket

上边简单叙述了Socket的意义，由于年代久远，很多事情也搞不了那么清楚。但WebSocket是一个很晚近的东西，可以让我们看到它是如何成为现在我们看到的这个样子的。

WHATWG(Web Hypertext Application Technology Working Group)

关于HTML5的故事很多人都是知道的，w3c放弃了HTML，然后有一群人（也有说是这些人供职的公司，不过官方的文档上是说的个人）创立了WHATWG组织来推动HTML语言的继续发展，同时，他们还发展了很多关于Web的技术标准，这些标准不断地被官方所接受。WebSocket就属于WHATWG发布的Web Application的一部分（即HTML5）的产物。

为什么会有 WebSocket

大约在08年的时候，WG的工程师在讨论网络环境中需要一种全双工的连接形式，刚开始一直叫做「TCPConnection」，并讨论了这种协议需要支持的功能，大致已经和我们今天看到的WebSocket差不多了。他们认为基于现有的HTTP之上的一些技术（如长轮询、Comet）并满足不了这种需求，有必要定义一个全新的协议。

名称的由来

在很多的关于HTML5或者WebSocket的文档中，都能看到一个名字，Hixie（Ian Hickson），他是WHATWG组织的发言人，曾供职于Netscape、Opera、Google，看工作的公司就知道这个人的背景了。

08年6月18日，一群WHATWG的工程师在讨论一些技术问题，一个工程师提到说「我们之前讨论的那个东西，不要叫TCPConnection 了，还是起个别的名字吧」，接着几个名字被提及，DuplexConnection，TCPSocket，SocketConnection ，一个叫mcarter（Michael Carter ）的工程师说他马上要写一篇关于Comet的文章，如果可以确定这个名称，想在文章中引用这个名字。

Socket一直以来都被人用来表示网络中一个连接的两端，考虑到怎么让工程师更容易接受，后来Hixie说了一句「我看WebSocket这个名字就很适合嘛（Hixie briefly pops back online to record that “WebSocket” would probably be a good new name for the TCPConnection object）」，大家都没有异议，紧接着mcarter在Comet Daily中发表了文章Independence Day: HTML5 WebSocket Liberates Comet From Hacks，后来随着各大浏览器对WebSocket的支持，它变成了实际的标准，IETF也沿用了这个名字。

下边是在WHATWG文档中对WebSocket接口的定义

    enum BinaryType { "blob", "arraybuffer" };

    [Constructor(USVString url, optional (DOMString or sequence<DOMString>) protocols = []), Exposed=(Window,Worker)]

    interface WebSocket : EventTarget {

      readonly attribute USVString url;

     

      // ready state

      const unsigned short CONNECTING = 0;

      const unsigned short OPEN = 1;

      const unsigned short CLOSING = 2;

      const unsigned short CLOSED = 3;

      readonly attribute unsigned short readyState;

      readonly attribute unsigned long long bufferedAmount;

     

      // networking

      attribute EventHandler onopen;

      attribute EventHandler onerror;

      attribute EventHandler onclose;

      readonly attribute DOMString extensions;

      readonly attribute DOMString protocol;

      void close([Clamp] optional unsigned short code, optional USVString reason);

     

      // messaging

      attribute EventHandler onmessage;

      attribute BinaryType binaryType;

      void send(USVString data);

      void send(Blob data);

      void send(ArrayBuffer data);

      void send(ArrayBufferView data);

    };

内容的确定

大多数新技术的出现都是建立在已有技术的铺垫之上的，WebSocket内容的确定也是如此，其中就有Comet看不到的贡献，Comet是一个很有趣的技术，有兴趣可以看看这里

结论

可以把WebSocket想象成HTTP，HTTP和Socket什么关系，WebSocket和Socket就是什么关系。

在线咨询

上一篇：打开网站就弹出网站公告提示框的JS弹窗代码
下一篇：JavaScript简单版发布留言怎么做？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商