WebSocket的了解与应用

最新推荐文章于 2024-04-07 16:06:01 发布

worshipme

最新推荐文章于 2024-04-07 16:06:01 发布

阅读量164

点赞数

分类专栏： Java开发文章标签： websocket java spring boot

本文链接：https://blog.csdn.net/worshipme/article/details/108424355

版权

Java开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

WebSocket简介

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
WebSocket使得客户端和服务端之间的数据交换换的更加简单，允许服务器主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket是一种全新的协议，与http协议关联不大，不过为了兼容现有浏览器的握手规范。所以理解成在http协议的基础上补充的一种协议也可。为了实现WebSocket通信，在http建立连接后，还需要进行一次“握手”的步骤

WebSocket的特性

建立在TCP协议之上，服务器端的实现比较容易
与HTTP协议有良好的兼容性。握手阶段采用HTTP协议，因此握手时不容屏蔽，能通过各种HTTP代理服务器
可以发送文本，也可发送二进制数据
协议标识符时ws(如果加密，则为wss)，服务器网址就是URL

WebSocket使用

准备工作

引入jar包

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

准备一个html页面，关键部分如下：

<script type="text/javascript">
    var websocket = null;
    
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/serverForWebSocket/001");
    } else {
        alert('Not support websocket')
    }

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

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

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

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

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

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

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

    //发送消息
    function send(){
    	// 获取要发送的内容
        var message = document.getElementById('text').value;
        console.log(message);
        websocket.send(message);
    }
</script>

准备WebSocket配置文件，本篇是在springboot项目上实现，所以这里加上WebSocketConfig配置文件（注入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。要注意，如果使用独立的servlet容器，而不是直接使用springboot的内置容器，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。）

@Configuration
public class WebSocketConfig {

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

接着准备一个controller验证下，这里需要说明一点的是不是有了onMessage方法就可以了，真正生效的是注解@onMessage

package com.study.websocket.websocketdemo.controller;

import org.springframework.stereotype.Component;

import javax.websocket.OnMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@Component
@ServerEndpoint(value = "/serverForWebSocket/{id}")
public class WebSocketController {

    private Session session;
    
    @OnMessage
    public void onMessage(String msg, Session session) {
        System.out.println(msg);
    }

}

这里还要补充说明一点的是，onMessage方法中有两个参数，msg是传递的消息，而session它是继承于Closeable，通过它来记录哪个页面做了登录的，与http中的session是不同的。

调试&完善

OK，一个最简单的验证做好了。启动项目，在输入框中输入“Hello World!”,可以看到，控制台打印了“Hello World!”，调试成功！
但这仅仅是前端页面向后台服务端的连接没有问题，肯定也要去完成服务端向前台页面传递消息的过程。这个过程是靠一个事件来触发的，在onOpen事件中就拿到了连接，建立好了通道，而不同的页面会有不同的连接，于是就需要一个集合来存储。最后再来说说发送消息的方法，这里就实现一个简单的群发功能，通过遍历存储的连接，将消息发送给除自己外的每一个连接。于是，有了下面一段：

package com.study.websocket.websocketdemo.controller;

import org.springframework.stereotype.Component;

import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint(value = "/serverForWebSocket/{id}")
public class WebSocketController {

    private Session session;


    private static CopyOnWriteArraySet<Session> webSocketSet = new CopyOnWriteArraySet<Session>();

    @OnOpen //事件 --登录的人.
    public void onopen(Session session) {
        this.session = session;
        System.out.println("seesionId为" + session.getId());
        webSocketSet.add(session);
        System.out.println("当前的连接数量为:" + webSocketSet.size());
    }


    @OnMessage
    public void onMessage(String msg, Session session) {
        System.out.println(msg);
        try {
            sendMessage(msg, session);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //推送
    public void sendMessage(String msg, Session session) throws IOException {
        for (Session session1 : webSocketSet) {
            if (session != session1)
                session1.getBasicRemote().sendText(msg);
        }

    }
}

打开两个页面，可以看到控制台提示有两个连接，然后在其中一个连接输入文字发送，可以看到在另一个连接中接收到了消息（如下图）
在这里插入图片描述
这里实现的是群发功能，如果实现指定两个连接的通信，可以再定义一个hashmap，存放session的id，每个session中的id是唯一标识，只要获取到了双方通信的session的id，就可以了(这里给出一段伪实现，假定id为“0”的session与id为“1”的session进行通信)

private static Map<String,String> sessionMap = new HashMap<>();

@OnOpen //事件 --登录的人.
public void onopen(Session session) {
    this.session = session;
    sessionMap.put(session.getId(),session.getId());// 此处可先通过http请求验证登录，存放（sessionId，登陆相关信息）
}

//推送
public void sendMessage(String msg, Session session) throws IOException {
    for (Session session1 : webSocketSet) {
        if (session != session1 && (session1.getId().equals(sessionMap.get("1")) || session1.getId().equals(sessionMap.get("0"))))
            session1.getBasicRemote().sendText(msg);
    }

}