Java程序员从笨鸟到菜鸟（四十一） WebSocket 简单介绍

最新推荐文章于 2022-07-19 19:27:09 发布

明割啦

最新推荐文章于 2022-07-19 19:27:09 发布

阅读量266

点赞数

分类专栏： java web 文章标签： WebSocket

本文链接：https://blog.csdn.net/u013090299/article/details/80854798

版权

java web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、概念

WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通信的协议，扩展了浏览器和服务端的通信功能，使服务端也能主动向客户端发送数据。

二、背景

HTTP 协议是一种无状态的、无连接的、单向的应用协议，采用了请求/响应模型，但是请求只能由客户端发起，服务端对请求做出应答处理，弊端：HTTP 协议无法实现服务器主动向客户端发起消息，如果服务端有连续的状态变化，客户端要获取非常麻烦（如带有即时通信、实时数据和订阅推送功能的已用），大部分 Web 应用程序将通过频繁的异步 javascript 和 XML(AJAX) 请求实现长轮询，轮询效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

轮询：最原始实现实时 Web 应用的解决方案，要求客户端以设定的时间间隔周期性地向服务端发送请求，频繁的查询是否有新的数据改变，这种方法会导致过多不必要的请求，浪费流量和服务器资源

Comet 技术可以分为长轮询和流技术。长轮询改变了轮询技术，减少了无用请求，会为某些数据设定过期时间，当数据过期后才会向服务端发送请求；这种机制适合数据的改动不是特别频繁的情况；流技术客户端使用一个隐藏的窗口与服务端建立一个HTTP长连接，服务端会不断更新连接状态以保持HTTP长连接存活；这样的话，服务端就可以通过这条长连接主动将数据发送给客户端；流技术在大并发环境下，可能会考验到服务端的性能。

这两种技术都是基于请求-应答模式，不算真正意义上的实时技术

WebSocket 连接允许客户端和服务端之间进行全双工的通信，以便任何一方都可以通过建立的连接将数据推送到另一端，WebSocket 只需建立一次连接，就可以一直保持连接状态，这相比于轮询不停的建立连接显然效率要大大提高。

三、WebSocket 客户端

客户端 API

var websocket = new WebSocket(url, [protocol]) // [protocol]参数可选

WebSocket 属性

属性	描述
websocket.readyState	只读属性 readyState 表示连接状态：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
websocket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

方法	描述
open	连接建立时触发
message	客户端接收服务器端数据时触发
error	通信发生错误时触发
cloase	连接关闭时触发

WebSocket 方法

方法	描述
websocket.send()	发送数据
websocket.close()	关闭连接

四、代码实现

前端页面 client.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Java 后端 WebSocket 的 Tomcat 实现</title>
</head>
<body>
        Welcome<br/>
        <input id="text" type="text"/>
        <button onclick="send()">发送消息</button>
        <hr/>
        <button onclick="closeWebSocket()">关闭WebSocket连接</button>
         <hr/>
        <div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    // 判断当前浏览器是否支持 WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8002/websocket");
    } else {
        alert('当前浏览器不支持 WebSocket');
    }

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

    // 连接建立成功的回调方法
    websocket.onopen = function() {
        setMessageInnerHTML("WebSocket 连接成功")
    }

    // 接收消息的回调方法
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    // 连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("WebSocket 关闭");
    }

    // 监听窗口事件，当关闭窗口时，主动去关闭 websocket 连接，放置连接还没端口就关闭窗口
    window.onbeforeunload = function() {
        setMessageInnerHTML("WebSocket 连接关闭");
    }

    // 将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    // 关闭 WebSocket 连接
    function closeWebSocket() {
        websocket.close();
    }

    // 发送消息
    function send() {
        var message = document.getElementById('text');
        var msg = message.value;
        websocket.send(msg);
    }
</script>
</html>

pom.xml 添加WebSocket 依赖

<dependency>
  <groupId>javax.websocket</groupId>
  <artifactId>javax.websocket-api</artifactId>
  <version>1.1</version>
  <scope>provided</scope>
</dependency>

后端 WebSocketTest.class

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * create by tan on 2018/6/26
 * WebSocket的tomcat实现
 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 **/
@ServerEndpoint("/websocket")
public class WebSocketTest {
    // 静态变量，用来记录当前在线连接数
    private static int onlineCount = 0;

    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocketTest> webSocketTests = new CopyOnWriteArraySet<>();

    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     * @param session 表示与某个客户端的连接会话，需要通过它来向客户端发送信息
     * */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketTests.add(this);
        addOnlineCount();   // 在线数加 1
        System.out.println("有连接加入！当前在线人数为：" + getOnlineCount());
    }

    /**
     * 连接关闭调用方法
     * */
    @OnClose
    public void onClose() {
        webSocketTests.remove(this); // 从 set 中删除
        subOnlineCount(); // 在线人数减 1
        System.out.println("有一连接关闭！当前在线人数为：" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session
     * */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息：" + message);
        // 群发消息
        for (WebSocketTest item: webSocketTests) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }

    /**
     * 发生错误时调用
     * @param session
     * @param error
     * */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

    /**
     * 发送消息
     * @param message
     * @throws IOException
     * */
    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 获取在线人数
     * @return onlineCount 返回在线人数
     * */
    private static synchronized int getOnlineCount() {
        return onlineCount;
    }

    /**
     * 在线人数加 1
     * */
    private static synchronized void addOnlineCount() {
        WebSocketTest.onlineCount++;
    }

    /**
     * 在线人数减 1
     * */
    private static synchronized void subOnlineCount() {
        WebSocketTest.onlineCount--;
    }
}

页面效果，使用两个浏览器打开网页，模拟实时通信
这里写图片描述

参考文章：
https://www.cnblogs.com/jingmoxukong/p/7755643.html
http://www.cnblogs.com/xdp-gacl/p/5193279.html
非常感谢两位作者

明割啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java程序员从笨鸟到菜鸟（四十一） WebSocket 简单介绍

一、概念WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通信的协议，扩展了浏览器和服务端的通信功能，使服务端也能主动向客户端发送数据。二、背景HTTP 协议是一种无状态的、无连接的、单向的应用协议，采用了请求/响应模型，但是请求只能由客户端发起，服务端对请求做出应答处理，弊端：HTTP 协议无法实现服务器主动向客户端发起消息，如果服...
复制链接

扫一扫