zoukankan      html  css  js  c++  java
  • 个人博客

    2021年5月16日:

    关于websocket的通信问题,我在网上的博客园找到了一个类似的例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>WebSocket</title>
        </head>
        <body>
            <input id="url" type="text" size="30" value="ws://localhost:9999/a/b" />
            <button onclick="openWebSocket()">打开WebSocket连接</button>
    
            <br/><br/>
            <textarea id="text" type="text"></textarea>
            <button onclick="send()">发送消息</button>
            <hr/>
            <button onclick="closeWebSocket()">关闭WebSocket连接</button>
            <hr/>
            <div id="message"></div>
        </body>
        <script type="text/javascript">
           var websocket = null;
       function openWebSocket() {
          var url = document.getElementById('url').value.trim();
          //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                websocket = new WebSocket(url);
          } else {
                alert('当前浏览器 Not support websocket')
          }
          //连接发生错误的回调方法
                websocket.onerror = function() {
                setMessageInnerHTML("WebSocket连接发生错误");
          };
          //连接成功建立的回调方法
                websocket.onopen = function() {
                setMessageInnerHTML("WebSocket连接成功");
          }
          //接收到消息的回调方法
                websocket.onmessage = function(event) {
                setMessageInnerHTML(event.data);
          }
          //连接关闭的回调方法
                websocket.onclose = function() {
                setMessageInnerHTML("WebSocket连接关闭");
          }
        }
        //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
            window.onbeforeunload = function() {
            closeWebSocket();
        }
        //将消息显示在网页上
            function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
        //关闭WebSocket连接
            function closeWebSocket() {
            websocket.close();
        }
        //发送消息
            function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
      </script>
    </html>




    package com.webSocket;
    
    import java.io.IOException;
    import java.util.Collection;
    import java.util.concurrent.ConcurrentHashMap;
    import java.util.concurrent.atomic.AtomicInteger;
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import org.springframework.stereotype.Component;
    
    /**
     * websocket服务端,多例的,一次websocket连接对应一个实例
     *  @ServerEndpoint 注解的值为URI,映射客户端输入的URL来连接到WebSocket服务器端
     */
    @Component
    @ServerEndpoint("/{name}/{toName}")
    public class WebSocketServer {
      /** 用来记录当前在线连接数。设计成线程安全的。*/
        private static AtomicInteger onlineCount = new AtomicInteger(0);
      /** 用于保存uri对应的连接服务,{uri:WebSocketServer},设计成线程安全的 */
        private static ConcurrentHashMap<String, WebSocketServer> webSocketServerMAP = new ConcurrentHashMap<>();
    private Session session;// 与某个客户端的连接会话,需要通过它来给客户端发送数据 private String name; //客户端消息发送者 private String toName; //客户端消息接受者 private String uri; //连接的uri   /** * 连接建立成功时触发,绑定参数 * @param session * 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据 * @param name * @param toName * @throws IOException */ @OnOpen public void onOpen(Session session, @PathParam("name") String name, @PathParam("toName") String toName) throws IOException { this.session = session; this.name = name; this.toName = toName; this.uri = session.getRequestURI().toString(); WebSocketServer webSocketServer = webSocketServerMAP.get(uri); if(webSocketServer != null){ //同样业务的连接已经在线,则把原来的挤下线。     webSocketServer.session.getBasicRemote().sendText(uri + "重复连接被挤下线了");   webSocketServer.session.close();//关闭连接,触发关闭连接方法onClose() }   webSocketServerMAP.put(uri, this);//保存uri对应的连接服务    addOnlineCount(); // 在线数加1    sendMessage(webSocketServerMAP +"当前在线连接数:" + getOnlineCount());   System.out.println(this + "有新连接加入!当前在线连接数:" + getOnlineCount()); } /** * 连接关闭时触发,注意不能向客户端发送消息了 * @throws IOException */ @OnClose public void onClose() throws IOException { webSocketServerMAP.remove(uri);//删除uri对应的连接服务   reduceOnlineCount(); // 在线数减1   System.out.println("有一连接关闭!当前在线连接数" + getOnlineCount()); } /** * 收到客户端消息后触发,分别向2个客户端(消息发送者和消息接收者)推送消息 * * @param message * 客户端发送过来的消息 * @param session * 可选的参数 * @throws IOException */ @OnMessage public void onMessage(String message) throws IOException { //服务器向消息发送者客户端发送消息 this.session.getBasicRemote().sendText("发送给" + toName + "的消息:" + message); //获取消息接收者的客户端连接 StringBuilder receiverUri = new StringBuilder("/"); receiverUri.append(toName) .append("/") .append(name); WebSocketServer webSocketServer = webSocketServerMAP.get(receiverUri.toString()); if(webSocketServer != null){ webSocketServer.session.getBasicRemote().sendText("来自" +name + "的消息:" + message); } /*// 群发消息 Collection<WebSocketServer> collection = webSocketServerMAP.values(); for (WebSocketServer item : collection) { try { item.sendMessage("收到群发消息:" + message); } catch (IOException e) { e.printStackTrace(); continue; } }*/ } /** * 通信发生错误时触发 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { System.out.println("发生错误"); error.printStackTrace(); } /** * 向客户端发送消息 * @param message * @throws IOException */   public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); }   public static int getOnlineCount() { return onlineCount.get(); } public static void addOnlineCount() { onlineCount.getAndIncrement(); } /** * 原子性操作,在线连接数减一 */ public static void reduceOnlineCount() { onlineCount.getAndDecrement(); } }
    这只是一个简单的websocket例子,具体怎么实现我还得摸索才能完成我的代码,这个是我的信息提醒:

     这个信的标志就是来信提醒,团员和社长能很直观的从系统上得知自己未读的信息从而进行回复,信息一旦读了之后就会消失,并且在红点上显示未读的信息条数。今天只是学习了websocket的方法,具体实现只能今后在做。

  • 相关阅读:
    html5与css交互 API 《一》classList
    HTML5标签速查
    html5中常被忘记的标签,属性
    html5不熟悉的标签全称
    基于HTML5的网络拓扑图(1)
    HTML5 Canvas绘制效率如何?
    前端性能优化(Application Cache篇)
    Android独立于Activity或者Fragment的LoadingDialog的实现
    android常用设计模式的理解
    android使用android:ellipsize="end"无效的解决方法
  • 原文地址:https://www.cnblogs.com/yitiaokuailedexiaojingyu/p/14872240.html
Copyright © 2011-2022 走看看