websocket

最新推荐文章于 2024-07-01 11:42:04 发布

qq_39013701

最新推荐文章于 2024-07-01 11:42:04 发布

阅读量167

点赞数

分类专栏： webSocket 文章标签： webSocket

webSocket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.jar包依赖

<!--
    这里的provided是表明该包只在编译和测试的时候用，
    因为tomcat8以后都支持websocket
-->
<dependency>
  <groupId>javax.websocket</groupId>
  <artifactId>javax.websocket-api</artifactId>
  <version>1.0</version>
  <scope>provided</scope>
</dependency>

二.后台代码

package com.miracle.websocket;

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * ServerEndpoint       注解声明这个类是websocket类
 * "/websocket/{name}"  表示监听地址，参数name可以由客户端发送，标识请求来源
 * websocket类是多例的，由于同时要建立多个实时连接
 */
@ServerEndpoint("/websocket/{name}")
public class WebSocket {
    // 用于记录当前websocket是谁
    private String name;
    // 连接，用于记录当前连接
    private Session session;
    // 建立静态map保存所有的 WebSocket，用于 WebSocket 之间通信，这里使用ConcurrentHashMap线程安全
    private static Map<String, WebSocket> allClients = new ConcurrentHashMap<>();

    /**
     *  方法名 onOpen任意
     *  @OnOpen 注解表示当建立websocket连接时，会调用此方法
     * @param name      代表请求路径中传的name，用于区分连接是谁
     * @param session   当前建立的连接
     */
    @OnOpen
    public void onOpen(@PathParam("name") String name, Session session){
        this.name = name;
        this.session = session;
        allClients.put(name, this);
    }

    /**
     * 方法名 onMessage任意，用于处理客户端发来的消息
     * @OnMessage 注解表示当websocket发消息时，会调用此方法
     * @param session   当前建立的连接
     * @param message   消息内容字符串
     *
     * 这里有个问题，虽然可以通过name来判断是谁发来的消息，
     * 但是无法判这个消息发送给谁，因此消息接收人相关信息，
     * 要包含在message中，这个由客户端和服务端约定
     * eg：  to:miracle,message:content,date:2019-08-08
     */
    @OnMessage
    public void onMessage(Session session, String message) throws IOException {
        // 首先解析发过来的内容，找到目标接收者
        ObjectMapper objectMapper = new ObjectMapper();
        Map<String, String> jsonMap = objectMapper.readValue(message, Map.class);
        String toUser = jsonMap.get("toUser");
        String toMessage = jsonMap.get("toMessage");
        // 根据目标接收者，找到它的session连接
        WebSocket webSocket = allClients.get(toUser);
        if (webSocket != null){
            // 获取目标对象的session
            Session toSession = webSocket.getSession();
            if (toSession.isOpen()){
                // 通过session发消息
                // getAsyncRemote() 找到连接的另外一端
                toSession.getAsyncRemote().sendText(toMessage);
            }
        }else {
            // 对方还没有和服务器建立过websocket，
            // 正常应该缓存这个消息
            // 这里就直接给发送者返回一条消息，对方不在线
            session.getAsyncRemote().sendText("对方不在线");
        }
    }

    /**
     * 当发生异常的情况触发
     * 方法名 onError任意，用于异常情况
     * @param session   当前建立的连接
     * @param e         异常信息
     */
    @OnError
    public void onError(Session session, Throwable e){

    }

    /**
     * 当websocket关闭的时候触发
     * @param session   当前建立的连接
     */
    @OnClose
    public void onClose(Session session){

    }


    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Session getSession() {
        return session;
    }

    public void setSession(Session session) {
        this.session = session;
    }

    public static Map<String, WebSocket> getAllClients() {
        return allClients;
    }

    public static void setAllClients(Map<String, WebSocket> allClients) {
        WebSocket.allClients = allClients;
    }
}

三.前台代码

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        var webSocket = null;
        function connection() {
            var username = document.getElementById("name").value;
            // 判断浏览器是否支持websocket
            if ('WebSocket' in window){
                webSocket = new WebSocket("ws://" + document.location.host + "/websocket/" + username);
            }else {
                alert('不支持Websocket')
            }
            webSocket.onopen = function () {
                document.getElementById("message").innerHTML = "建立连接了";
            };
            webSocket.onmessage = function (event) {
                var data = event.data;
                document.getElementById("message").innerHTML = "收到消息了:" + data;
            };
            webSocket.onerror = function () {
                document.getElementById("message").innerHTML = "出现异常了";
            };
            webSocket.onclose = function () {
                document.getElementById("message").innerHTML = "连接关闭了";
            };

            // 当浏览器的页面窗口关闭的时候，此处应该关闭连接，释放服务器资源
            window.onbeforeunload = function (event) {
                if (webSocket != null){
                    webSocket.close();
                }
            }
        };
        function sendMessage(){
            var toUser = document.getElementById("toUser").value;
            var toMessage = document.getElementById("toMessage").value;
            if(webSocket != null){
                var message = '{"toUser":"' + toUser + '","toMessage":"' + toMessage + '"}'
                webSocket.send(message);
            }
        }
    </script>
</head>
<body>
    <input type="text" id="name" name="name">
    <button onclick="connection()">连接</button>
    <br>

    接收者名字:<input type="text" name="toUser" id="toUser"><br>
    内容：<input type="text" name="toMessage" id="toMessage"><br>
    <button onclick="sendMessage()">发送</button>

    <h2 id="message">Hello World!</h2>
</body>
</html>