WebSocket一懂(01)

最新推荐文章于 2024-03-29 13:22:56 发布

通俗一懂

最新推荐文章于 2024-03-29 13:22:56 发布

阅读量123

点赞数

文章标签： websocket echarts java idea

本文链接：https://blog.csdn.net/m0_46401050/article/details/120796347

版权

文章目录

WebSocket使用场景介绍
什么是WebSocket？
WebSocket图解：
客户端代码
客户端代码图解
服务端代码

WebSocket使用场景介绍

实现两个系统之间的数据交互，A系统中的echarts图需要在B系统的固定位置进行展示，用到了WebSocket，A系统点击发送按钮，会把echarts图的数据传输给B系统，B系统获取到数据，进行echarts展示这里为什么没有使用socket：原因是：传统的socket，是一个长连接，客户端连接服务端，如果客户端和服务端都没有发送数据，就会造成资源浪费。使用了WebSocket，WebSocket他是一种长连接，通过一次请求来初始化连接，然后所有的请求和响应都是通过这个TCP连接进行通讯，它是一种基于事件驱动，异步的消息机制。原理和TCP一样，只需要一个握手动作，就可以形成一条快速通道。

什么是WebSocket？

WebSocket是一种在单个TCP(传输控制协议:是面向连接的、可靠的、基于字节流之间的传输层通信协议)连接上进行全双工通信的协议。

全双工和单工的区别：
全双工：可在信号载波的两个方向同时传输
单工：一方固定为发送端，一方固定为接收端，信息只能从一条传输线朝一个方向传播

WebSocket通信的客户端是浏览器，客户端操作的API是HTML5新增的API，使用这些API可以让客户端(浏览器)和服务端(服务器)进行全双工通讯。

WebSocket图解：

在这里插入图片描述

客户端代码

<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
</head>

<body>
<input id="text" type="text" />
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
   
        //创建websocket实例
        websocket = new WebSocket("ws://localhost:8080/websocketss");
    } else {
   
        alert('Not support websocket')
    }

    //连接成功自动建立的回调方法
    websocket.onopen = function(event) {
   
        //setMessageInnerHTML("open");
    }


    //连接发生错误的回调方法
    websocket.onerror = function() {
   
        setMessageInnerHTML("error");
    };



    //接收到消息的回调方法 监听消息onmessage事件提供了一个data属性，它包含消息的body部分
    websocket.onmessage = function(event) {
   
        setMessageInnerHTML("前端展示" + event.data);
    }

    //连接关闭的回调方法
    websocket.onclose =