学习WebSocket(三)

webSocket 服务器

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint("/websocket")
public class MyWebSocket {
    /**
     * 与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    private Session session;

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

    /**
     * 连接建立成功调用的方法
     * Session是webSocket的回话,一个session 代表一个通信会话
     *
     * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);
        System.out.println("sessionID:" + session.getId());
//    WebSocketMapUtil.put(session.getQueryString().split("=")[1],session);
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        //从map中删除
        webSocketSet.remove(this);
//    WebSocketMapUtil.remove(session.getQueryString().split("=")[1]);
        System.out.println("连接关闭");
    }

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

    /**
     * 发送消息方法。
     *
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);  ---------------如果直接调用这个方法。this.session这个值是null.所以需要下面的方法进行对session的遍历。
    }

    /**
     * 发送消息方法。
     *
     * @param message
     * @throws IOException
     */
    public void sendMessageToWeb(String message) throws IOException {
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }
}

文章二的那种方式。适用于特定的需求需要。

海康设备视频预览功能

<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
    <script>
        document.write("<link type='text/css' href='<%=basePath %>module/css/video/demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
    </script>
    <link href="<%=basePath %>media/assets/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    .wrapper {
        margin-top:70px !important;
    }
</style>

<body>
<section class="wrapper">
    <div class="left">
        <div id="divPlugin" class="plugin"></div>
        <input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay();" />
        <fieldset class="login" style="display: none">
            <legend>登录</legend>
            <table cellpadding="0" cellspacing="3" border="0">
                <tr>
                    <td class="tt">IP地址</td>
                    <td><input id="loginip" type="text" class="txt" value="${classIp.ip}" /></td>
                    <td class="tt">端口号</td>
                    <td><input id="port" type="text" class="txt" value="80" /></td>
                </tr>
                <tr>
                    <td class="tt">用户名</td>
                    <td><input id="username" type="text" class="txt" value="${classIp.name}" /></td>
                    <td class="tt">密码</td>
                    <td><input id="password" type="password" class="txt" value="${classIp.password}" /></td>
                </tr>
                <tr>
                    <td class="tt">设备端口</td>
                    <td colspan="2"><input id="deviceport" type="text" class="txt" value="8000" />(可选参数)</td>
                    <td>
                        窗口分割数&nbsp;
                        <select class="sel2" onchange="changeWndNum(this.value);">
                            <option value="1" selected >1x1</option>
                            <option value="2">2x2</option>
                            <option value="3">3x3</option>
                            <option value="4">4x4</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <input type="button" class="btn" value="登录" id="clickLoginBtn" onclick="clickLogin();" />
                        <input type="button" class="btn" value="退出" onclick="clickLogout();" />
                        <input type="button" class="btn2" value="获取基本信息" onclick="clickGetDeviceInfo();" />
                    </td>
                </tr>
                <tr>
                    <td class="tt">已登录设备</td>
                    <td>
                        <select id="ip" class="sel" onchange="getChannelInfo();"></select>
                    </td>
                    <td class="tt">通道列表</td>
                    <td>
                        <select id="channels" class="sel"></select>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    <div class="left">
        <fieldset class="preview" style="display: none">
            <legend>预览</legend>
            <table cellpadding="0" cellspacing="3" border="0">
                <tr>
                    <td class="tt">码流类型</td>
                    <td>
                        <select id="streamtype" class="sel">
                            <option value="1">主码流</option>
                            <option value="2">子码流</option>
                            <option value="3">第三码流</option>
                            <option value="4">转码码流</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay();" />
                        <input type="button" class="btn" value="停止预览" onclick="clickStopRealPlay();" />
                    </td>
                </tr>
                <tr>
                    <td class="tt">音量</td>
                    <td>
                        <input type="text" id="volume" class="txt" value="50" maxlength="3" />&nbsp;<input type="button" class="btn" value="设置" onclick="clickSetVolume();" />(范围:0~100)
                    </td>
                    <td>
                        <input type="button" class="btn" value="打开声音" onclick="clickOpenSound();" />
                        <input type="button" class="btn" value="关闭声音" onclick="clickCloseSound();" />
                    </td>
                </tr>
                <tr>
                    <td class="tt">对讲通道</td>
                    <td>
                        <select id="audiochannels" class="sel">

                        </select>
                        <input type="button" class="btn" value="获取通道" onclick="clickGetAudioInfo();" />
                    </td>
                    <td>
                        <input type="button" class="btn" value="开始对讲" onclick="clickStartVoiceTalk();" />
                        <input type="button" class="btn" value="停止对讲" onclick="clickStopVoiceTalk();" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" class="btn" value="抓图" onclick="clickCapturePic();" />
                        <input type="button" class="btn" value="开始录像" onclick="clickStartRecord();" />
                        <input type="button" class="btn" value="停止录像" onclick="clickStopRecord();" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" class="btn2" value="启用电子放大" onclick="clickEnableEZoom();" />
                        <input type="button" class="btn2" value="禁用电子放大" onclick="clickDisableEZoom();" />
                        <input type="button" class="btn2" value="启用3D放大" onclick="clickEnable3DZoom();" />
                        <input type="button" class="btn2" value="禁用3D放大" onclick="clickDisable3DZoom();" />
                        <input type="button" class="btn" value="全屏" onclick="clickFullScreen();" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
</section>

</body>
<script src="<%=basePath %>module/js/jquery-1.7.1.min.js"></script>
<script src="<%=basePath %>module/js/video/webVideoCtrl.js"></script>
<script src="<%=basePath %>media/plugins/layer/2.4/layer.js"></script>
<script src="<%=basePath %>module/js/video/demo.js"></script>
<script type="text/javascript">
    $(function () {
        //触发设备的登录
        $("#clickLoginBtn").click();
        //窗口默认1个
        changeWndNum(1);
        //触发视频预览
        window.setTimeout(clickStartRealPlay(), 1000);
    });

</script>
</html>

猜你喜欢

转载自www.cnblogs.com/xuerong/p/8926213.html
今日推荐