一实例从WebSocket入门至精通

最新推荐文章于 2023-06-09 20:23:26 发布

RedLeague

最新推荐文章于 2023-06-09 20:23:26 发布

阅读量1.9k

点赞数 4

文章标签： websocket 消息推送实时通讯

本文链接：https://blog.csdn.net/sun120204535/article/details/70860167

版权

主要是客户端的进化（环境 jdk1.7以上 tomcat 7.34以上）

1、服务器端

package com;


import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
 
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。
@ServerEndpoint("/chat")
public class MyWebSocket {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
     
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
     
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
     
    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
    }
     
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1    
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }
     
    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
         
        //群发消息
        for(MyWebSocket item: webSocketSet){             
            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);
        //this.session.getAsyncRemote().sendText(message);
    }
 
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }
 
    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }
     
    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }
}

2.客户端

A、最简单的客户端（一客户端发送信息，其他客户端以Text显示信息）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My WebSocket</title>
  </head>
   
  <body>
    Welcome<br/>
    <input id="text" type="text" /><button οnclick="send()">Send</button>    <button οnclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
  </body>
   
  <script type="text/JavaScript">
      var websocket = null;
       
      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
          websocket = new WebSocket("ws://"+ window.location.host+"/${pageContext.request.contextPath}/chat");
      }
      else{
          alert('Not support websocket');
      }
       
      //连接发生错误的回调方法
      websocket.onerror = function(){
          setMessageInnerHTML("error");
      };
       
      //连接成功建立的回调方法
      websocket.onopen = function(event){
          setMessageInnerHTML("open");
      };
       
      //接收到消息的回调方法
      websocket.onmessage = function(){
          setMessageInnerHTML(event.data);
      };
       
      //连接关闭的回调方法
      websocket.onclose = function(){
          setMessageInnerHTML("close");
      };
       
      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      window.onbeforeunload = function(){
          websocket.close();
      };
       
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML){
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
       
      //关闭连接
      function closeWebSocket(){
          websocket.close();
      }
       
      //发送消息
      function send(){
          var message = document.getElementById('text').value;
          websocket.send(message);
      }
  </script>
  
</html>

B、一阶进化（客户端发送信息，其他Session以右下角弹窗显示推送信息）

技术点：客户端接收到服务器的信息时，onmessage响应产生右下角弹框。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页右下角的信息框</title>
</head>
<style type="text/css">
#winpop {
width: 200px;
height: 0px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid #666;
margin: 0;
padding: 1px;
overflow: hidden;
display: none;
}

#winpop .title {
width: 100%;
height: 22px;
line-height: 20px;
background: #FFCC00;
font-weight: bold;
text-align: center;
font-size: 12px;
}

#winpop .con {
width: 100%;
height: 90px;
line-height: 80px;
font-weight: bold;
font-size: 12px;
color: #FF0000;
text-decoration: underline;
text-align: center
}

#silu {
font-size: 12px;
color: #666;
position: absolute;
right: 0;
text-align: left;
text-decoration: underline;
line-height: 22px;
}

.close {
position: absolute;
right: 4px;
top: -1px;
color: #FFF;
cursor: pointer
}
</style>
<script type="text/javascript">
function tips_pop() {
var MsgPop = document.getElementById("winpop");
MsgPop.style.height = '0px';
var popH = parseInt(MsgPop.style.height);//将对象的高度转化为数字
if (popH == 0) {
MsgPop.style.display = "block";//显示隐藏的窗口
show = setInterval("changeH('up')", 2);
} else {
hide = setInterval("changeH('down')", 2);
}
document.getElementById("con_text").innerHTML = event.data;
setTimeout("tips_close()", 12200); //30秒后消息自动消失
}

function tips_close() {
var close_tips = document.getElementById("winpop");
close_tips.style.display = "none";
}

function changeH(str) {
var MsgPop = document.getElementById("winpop");
var popH = parseInt(MsgPop.style.height);
if (str == "up") {
if (popH <= 100) {
MsgPop.style.height = (popH + 4).toString() + "px";
} else {
clearInterval(show);
}
}
if (str == "down") {
if (popH >= 4) {
MsgPop.style.height = (popH - 4).toString() + "px";
} else {
clearInterval(hide);
MsgPop.style.display = "none"; //隐藏DIV
}
}
}
</script>

<script type="text/JavaScript">
var websocket = null;

//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + window.location.host
+ "/${pageContext.request.contextPath}/chat");
} else {
alert('Not support websocket');
}

//连接发生错误的回调方法
websocket.onerror = function() {
setMessageInnerHTML("error");
};

//连接成功建立的回调方法
websocket.onopen = function(event) {
setMessageInnerHTML("open");
};

//接收到消息的回调方法
websocket.onmessage = function() {
setMessageInnerHTML(event.data);
tips_pop();
};

//连接关闭的回调方法
websocket.onclose = function() {
setMessageInnerHTML("close");
};

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
websocket.close();
};

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket() {
websocket.close();
}

//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>

<body>
<div id="silu">
<input id="text" type="text" />
<button οnclick="send()">Send</button>
<div id="message"></div>
</div>
<div id="winpop">
<div class="title">
您有新的短消息！<span class="close" οnclick="tips_close()">X</span>
</div>
<div id="con_text" class="con">1条未读信息</div>
</div>
</body>
</html>

C、二阶进化，只要登陆，客户端在该网站其他页面均可以收到消息（客户端A.B只能在index.jsp里才可以接收消息）

技术点：WebSocket 建立一个单独的 iframe

一般都是用多 frame 来实现，即建立 WebSocket 是单独的一个 frame，且此 frame 不随页面切换而刷新，至于其他需要在页面切换时刷新的元素放在其他 frame 里。

最后，看的觉得可以不要吝啬手中的赞 b(￣▽￣)d

RedLeague

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
一实例从WebSocket入门至精通

主要是客户端的进化（环境 jdk1.7以上 tomcat ）1、服务器端package com;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.OnClose;import javax.websocket.OnError
复制链接

扫一扫