WebSocket实例

最新推荐文章于 2024-08-22 16:17:31 发布

忘川zzZ

最新推荐文章于 2024-08-22 16:17:31 发布

阅读量265

点赞数 1

分类专栏： servlet 文章标签： WebSocket

本文链接：https://blog.csdn.net/ZZPJackie/article/details/103352623

版权

servlet 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用JavaScript和Servlet来实现WebSocket通信。通过一个JSP页面和对应的servlet代码示例，展示了WebSocket在实际应用中的基本操作。

摘要由CSDN通过智能技术生成

运用JS+servlet实现WebSocket

JSP页面如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
   <!doctype html>
  <html>
      <head>
          <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
          <meta name="keywords" content="">
           <meta name="description" content="">
           <title>聊天室</title>
          <style>
             *{margin:0;padding:0;}
              body{background:url("images/5.jpg");background-size:cover;}
              h1{margin-top:50px;text-align:center;color:#fff;text-shadow:1px 1px 1px #000;font-family:-webkit-body;font-size:24px;}
              .box{width:700px;margin:20px auto;}
              .box span{color:#f60;font-size:16px;font-family:"微软雅黑";}
            .box .shu{text-indent:1em;height:24px;font-family:"微软雅黑";border:0;outline:none;font-size:14px;}
              .box .add{width:300px;margin-right:24px;}
              .box .user{width:200px;}
              .box .btn{width:80px;height:34px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;margin-top:20px;font-size:16px;font-family:"微软雅黑";}
              .box .area{line-height: 29px;height:280px;width:680px;padding:10px;overflow:auto;font-size:16px;font-family:"微软雅黑";margin:20px 0;outline:none;box-shadow:1px 2px 18px #000}
             .box .setex{text-indent:1em;height:28px;border:1px solid #6c0;width:618px;outline:none;float:left;font-family:"微软雅黑";}
             .box .send{font-size:14px;width:80px;height:30px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;font-family:"微软雅黑";}
          </style>
      </head>
      <body>
         <!--  <h1>基于Java服务器端的消息主动推送技术揭秘 --krry</h1> -->
         <h1>聊天室</h1>
         <div class="box">
             <!-- <span>服务器地址：</span><input type="text" class="shu add" value="localhost/WebSocketUser/websocket" readonly/> -->
              <span>用户名：</span><input type="text" class="shu user" value="hello"/>
              <input type="button" value="连接" class="btn" />
            
            
             <div class="area" id="boxx"></div>
             
             
              <div class="c_cen">
                 <input type="text" class="setex"/>
                 <input type="button" value="发送" class="send">
              </div>
              
         </div>
         <script src="js/jquery-1.10.1.js"></script>
         <script>
         
         
             var close = true;
              var ws;
              $(function(){
                  $(".c_cen").hide();
                  //首先判断浏览器是否支持webSocket，支持h5的浏览器才会支持
                  if(window.WebSocket){
                      printMsg("您的浏览器支持WebSocket，您可以尝试连接到聊天服务器！","OK");
                  }else{
                      printMsg("您的浏览器不支持WebSocket，请选择其他浏览器！","ERROR");
                      //设置按钮不可点击
                      $(".btn").attr("disabled","true");
                  }
              });
              //打印信息
             function printMsg(msg,msgType){
                  if(msgType == "OK"){
                     msg = "<span style='color:green'>"+msg+"</span>";
                  }
                if(msgType == "ERROR"){
                      msg = "<span style='color:red'>"+msg+"</span>";
                 }
                  $(".area").append(msg+"<br/>");  //信息拼接块
                  var boxx = document.getElementById("boxx");
                  boxx.scrollTop = boxx.scrollHeight;//使滚动条一直在底部
              }

              //打开Socket
              function openWs(){
                printMsg("链接已建立","OK");
                 ws.send("【"+$(".user").val()+"】已进入聊天室");
                 $(".c_cen").show();
             }
				
             //接收消息的时候
             function msgWs(e){
                  printMsg(e.data);
              }
              //关闭连接
              function closeWs(){
                  $(".btn").val("连接");
                  $(".c_cen").hide();
              }
              //产生错误
              function errorWs(){
                  printMsg("您与服务器连接错误...","ERROR");
              }
  
              //点击发送按钮
              $(".send").click(function(){
                  var text = $(".setex").val();
                  if(text == null || text == "") return;
                  $(".setex").val("");
                  ws.send("【"+$(".user").val()+"】："+text);
              });
              
              //点击连接
             // $(".btn").click(function(){
                  if($(".user").val()){
                     if(close){
                         printMsg("正在准备连接服务器，请稍等...");
                         var url = "ws://localhost/WebSocketUser/websocket";
                         if("WebSocket" in window){
                             ws = new WebSocket(url);
                         }else if("MozWebSocket" in window){
                             ws = new MozWebSocket(url);
                         }
                         //已连接
                         $(".btn").val("断开");
                         close = false;
                         
                         //注册事件
                         ws.onopen = function(){
                             openWs();
                         };
                         ws.onmessage = function(event){
                             msgWs(event);
                         };
                         ws.onclose = function(){
                             closeWs();
                         };
                         ws.onerror = function(){
                             errorWs();
                         };
                         
                         //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                         window.onbeforeunload = function(){
                             ws.send("【"+$(".user").val()+"】离开了聊天室");
                             close = true;
                             ws.close();
                         };
                         
                     }else{
                         ws.send("【"+$(".user").val()+"】离开了聊天室");
                         close = true;
                         ws.close();
                     }
                 }else{
                     $.tmDialog.alert({open:"left",content:"服务器地址和用户名不能为空哦...",title:"提示哦~~~"});
                 }
             //});
             
             //回车键
             $(".setex").keypress(function(event){
                 if(event.keyCode == 13){
                     $(".send").trigger("click");
                 }
             });
         </script>
     </body>
 </html>

servlet代码如下：

package socket;

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;

@ServerEndpoint("/websocket") // 使用注解建立连接点
public class Progress {

	private static int onlineCount = 0;
	private static CopyOnWriteArraySet<Progress> webSocketSet = new CopyOnWriteArraySet<>();
	private Session session;
	private String username;

	@OnOpen
	public void onOpen(Session session) {
		this.session = session;
		webSocketSet.add(this); // 加入set中
		addOnlineCount();// 在线数 +1
	}

	private static synchronized void addOnlineCount() {
		Progress.onlineCount++;
	}

	@OnClose
	public void onClose() {
		webSocketSet.remove(this); // 从set中删除
		subOnlineCount(); // 在线数 -1
	}

	private void subOnlineCount() {
		Progress.onlineCount--;
	}

	@OnMessage
	public void onMessage(String message, Session session) {
		System.out.println(message);
		// 群发消息
		for (Progress item : webSocketSet) {
			try {
				item.sendMessage(message);
			} catch (Exception e) {
				e.printStackTrace();
				continue;
			}
		}
	}

	private void sendMessage(String message) throws IOException {
		this.session.getBasicRemote().sendText(message);
	}

	@OnError
	public void onError(Session session, Throwable error) {
		System.out.println("发生错误");
		error.printStackTrace();
	}

	public static synchronized int getOnlineCount() {
		return onlineCount;
	}
}