【WebSocket】WebSocket经典实例-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

【WebSocket】WebSocket经典实例

简介: 接着上一篇的环境,我们接下来弄了个WebSocketTest2 目录结构 jquery-1.12.3.js(贴心服务) WebSocketTest2.java package com.hust.websockettest; import java.io.IOException; import java.util.Queue; import java.util.

接着上一篇的环境,我们接下来弄了个WebSocketTest2

目录结构
这里写图片描述

jquery-1.12.3.js(贴心服务)

WebSocketTest2.java

package com.hust.websockettest;

import java.io.IOException;
import java.util.Queue;
import java.util.Set;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket2")
public class WebSocketTest2 {
    /**
     * 存储当前有效的session对象
     */
    private static Queue<Session> sessionSet = new ConcurrentLinkedQueue<Session>();

    @OnMessage
    public void onMessage(String message, Session currentSession) {
        System.out.println("Server say:Received: " + message);
        try {
            final Set<Session> sessions = currentSession.getOpenSessions();
            // 客户端互相发送消息
            for (Session session : sessions) {
                session.getBasicRemote().sendText(message);
            }
            /************ 启动定时公告 **************/
            //SystemTimer.getInstance();
            /**************************/
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @OnOpen
    public void onOpen(Session currentSession) {
        if (sessionSet.contains(currentSession) == false) {
            sessionSet.add(currentSession);
            System.out.println("WebSocketTest.onOpen()================Add=" + sessionSet.size());
        }
        System.out.println("Server say:Client connected");
    }

    @OnClose
    public void onClose(Session currentSession) {
        if (sessionSet.contains(currentSession)) {
            sessionSet.remove(currentSession);
        }
        System.out.println("Server say:Connection closed============Close=" + sessionSet.size());
    }

    public static Queue<Session> getSessionSet() {
        return sessionSet;
    }

}

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
.infos {
    list-style-type: none;
}

.infos li {
    border: 1px solid #EEE;
    margin: 2px;
    font-size: 12px;
    line-height: 25px;
    height: 25px;
}

.red {
    color: red;
}

.green {
    color: green;
}

.blue {
    color: blue;
}
</style>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
    var webSocket = null;
    var flag = true;//全局标记位,标记浏览器是否支持websocket
    $(function() {
        if (!window.WebSocket) {
            $("body").append("<h1>你的浏览器不支持WebSocket</h1>");
            flag = false;
            return;
        }

    });

    function startConnect() {
        if (flag == false) {
            return;
        }
        var url = "ws://localhost:8080/WebSocketTest/websocket2";
        webSocket = new WebSocket(url);

        webSocket.onerror = function(event) {
            onError(event)
        };
        webSocket.onopen = function(event) {
            onOpen(event)
        };
        webSocket.onmessage = function(event) {
            onMessage(event)
        };

        //webSocket.send("客户端给服务端发送消息:hello,start");

    }
    function onMessage(event) {
        $(".infos").append("<li class='blue'>" + event.data + "</li>");
    }
    function onOpen(event) {
        $(".infos").append("<li class='green'>已连接至服务器</li>");
        $("#startBtn").prop("disabled", true);
        $("#sendMessageBtn").prop("disabled", false);
    }
    function onError(event) {
        $(".infos").append("<li class='red'>连接服务器发生错误</li>");
    }
    function sendMessage() {
        var msg = "[" + $("#username").val() + "]:"
                + $("#message_input_id").val();//获取发送信息
        webSocket.send(msg);//向服务器发送消息
        //不需要将此信息追加到列表,由后台统一将消息发送给所有
        //$(".infos").append("<li class='green'>" + msg + "</li>");//将消息添加至本地列表
        $("#message_input_id").val("");//清空消息
    }
</script>
</head>

<body>

    <ul class="infos">
        <li class="red">提示:点击开始连接将连接到服务器</li>
    </ul>
    <br />
    <br />
    <input type="button" value="开始连接" id="startBtn"
        onclick="startConnect()" />
    <br />
    <br /> 输入名称:
    <input id="username" value="<%=(int) (Math.random() * 1000)%>"
        style="width: 50px; margin-right: 5px;" />
    <input id="message_input_id" />
    <input type="button" value="发送消息" id="sendMessageBtn"
        disabled="disabled" onclick="sendMessage()" />

</body>
</html>

运行截图

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

看图基本明白,第一个是我连接之后断开额,二三是一起连接着的,所以后台会显示add=2。就是可以多个一起链接,而且是长连接。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章