学习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> 窗口分割数 <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" /> <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>