java 开发 websocket 网页端聊天室

博客地址:https://ainyi.com/67

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

需要导入一个jar包:javax.websocket-api-1.0-rc4.jar

注意点:

需要实现这几个方法:

 1 //注册事件
 2     ws.onopen = function(){
 3           openWs();
 4     };
 5     ws.onmessage = function(event){
 6            msgWs(event);
 7     };
 8     ws.onclose = function(){
 9           closeWs();
10     };
11     ws.onerror = function(){
12           errorWs();
13     };

后台代码:

 1 package com.krry.socket;
 2 import java.io.IOException;
 3 import java.util.concurrent.CopyOnWriteArraySet;
 4  
 5 import javax.websocket.OnClose;
 6 import javax.websocket.OnError;
 7 import javax.websocket.OnMessage;
 8 import javax.websocket.OnOpen;
 9 import javax.websocket.Session;
10 import javax.websocket.server.ServerEndpoint;
11  
12 //该注解用来指定一个URI,客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。
13 @ServerEndpoint("/websocket")
14 public class MyWebSocket {
15     //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
16     private static int onlineCount = 0;
17      
18     //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
19     private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
20      
21     //与某个客户端的连接会话,需要通过它来给客户端发送数据
22     private Session session;
23      
24     /**
25      * 连接建立成功调用的方法
26      * @param session  可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
27      */
28     @OnOpen
29     public void onOpen(Session session){
30         this.session = session;
31         webSocketSet.add(this);     //加入set中
32         addOnlineCount();           //在线数加1
33         System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
34     }
35      
36     /**
37      * 连接关闭调用的方法
38      */
39     @OnClose
40     public void onClose(){
41         webSocketSet.remove(this);  //从set中删除
42         subOnlineCount();           //在线数减1    
43         System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
44     }
45      
46     /**
47      * 收到客户端消息后调用的方法
48      * @param message 客户端发送过来的消息
49      * @param session 可选的参数
50      */
51     @OnMessage
52     public void onMessage(String message, Session session) {
53         System.out.println("来自客户端的消息:" + message);
54          
55         //群发消息
56         for(MyWebSocket item: webSocketSet){             
57             try {
58                 item.sendMessage(message);
59             } catch (IOException e) {
60                 e.printStackTrace();
61                 continue;
62             }
63         }
64     }
65      
66     /**
67      * 发生错误时调用
68      * @param session
69      * @param error
70      */
71     @OnError
72     public void onError(Session session, Throwable error){
73         System.out.println("发生错误");
74         error.printStackTrace();
75     }
76      
77     /**
78      * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
79      * @param message
80      * @throws IOException
81      */
82     public void sendMessage(String message) throws IOException{
83         this.session.getBasicRemote().sendText(message);
84         //this.session.getAsyncRemote().sendText(message);
85     }
86  
87     public static synchronized int getOnlineCount() {
88         return onlineCount;
89     }
90  
91     public static synchronized void addOnlineCount() {
92         MyWebSocket.onlineCount++;
93     }
94      
95     public static synchronized void subOnlineCount() {
96         MyWebSocket.onlineCount--;
97     }
98 }

前端代码:

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <!doctype html>
  3 <html>
  4     <head>
  5         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  6         <meta name="keywords" content="">
  7         <meta name="description" content="">
  8         <title>基于Java服务器端的消息主动推送技术揭秘 --krry</title>
  9         <link rel="stylesheet" href="css/animate.css"/>
 10         <link rel="stylesheet" type="text/css" href="css/sg.css" />
 11         <style>
 12             *{margin:0;padding:0;}
 13             body{background:url("images/5.jpg");background-size:cover;}
 14             h1{margin-top:50px;text-align:center;color:#fff;text-shadow:1px 1px 1px #000;font-family:-webkit-body;font-size:24px;}
 15             .box{width:700px;margin:20px auto;}
 16             .box span{color:#f60;font-size:16px;font-family:"微软雅黑";}
 17             .box .shu{text-indent:1em;height:24px;font-family:"微软雅黑";border:0;outline:none;font-size:14px;}
 18             .box .add{width:300px;margin-right:24px;}
 19             .box .user{width:200px;}
 20             .box .btn{width:80px;height:34px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;margin-top:20px;font-size:16px;font-family:"微软雅黑";}
 21             .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}
 22             .box .setex{text-indent:1em;height:28px;border:1px solid #6c0;width:618px;outline:none;float:left;font-family:"微软雅黑";}
 23             .box .send{font-size:14px;width:80px;height:30px;color:#fff;background:#6c0;border:0;outline:none;cursor:pointer;font-family:"微软雅黑";}
 24         </style>
 25     </head>
 26     <body>
 27         <h1>基于Java服务器端的消息主动推送技术揭秘 --krry</h1>
 28         <div class="box">
 29             <span>服务器地址:</span><input type="text" class="shu add" value="localhost/krry_NetChat/websocket" readonly/>
 30             <span>用户名:</span><input type="text" class="shu user" value="匿名"/>
 31             <input type="button" value="连接" class="btn" />
 32             <div class="area" id="boxx"></div>
 33             <div class="c_cen">
 34                 <input type="text" class="setex"/>
 35                 <input type="button" value="发送" class="send">
 36             </div>
 37         </div>
 38         <script src="js/jquery-1.11.1.min.js"></script>
 39         <script src="js/sg.js"></script>
 40         <script src="js/sgutil.js"></script>
 41         <script>
 42             var close = true;
 43             var ws;
 44             $(function(){
 45                 $(".c_cen").hide();
 46                 //首先判断浏览器是否支持webSocket,支持h5的浏览器才会支持
 47                 if(window.WebSocket){
 48                     printMsg("您的浏览器支持WebSocket,您可以尝试连接到聊天服务器!","OK");
 49                 }else{
 50                     printMsg("您的浏览器不支持WebSocket,请选择其他浏览器!","ERROR");
 51                     //设置按钮不可点击
 52                     $(".btn").attr("disabled","true");
 53                 }
 54             });
 55             //打印信息
 56             function printMsg(msg,msgType){
 57                 if(msgType == "OK"){
 58                     msg = "<span style='color:green'>"+msg+"</span>";
 59                 }
 60                 if(msgType == "ERROR"){
 61                     msg = "<span style='color:red'>"+msg+"</span>";
 62                 }
 63                 $(".area").append(msg+"<br/>");
 64                 var boxx = document.getElementById("boxx");
 65                 boxx.scrollTop = boxx.scrollHeight;//使滚动条一直在底部
 66             }
 67             
 68             //打开Socket
 69             function openWs(){
 70                 printMsg("链接已建立","OK");
 71                 ws.send("【"+$(".user").val()+"】已进入聊天室");
 72                 $(".c_cen").show();
 73             }
 74             
 75             //接收消息的时候
 76             function msgWs(e){
 77                 printMsg(e.data);
 78             }
 79             //关闭连接
 80             function closeWs(){
 81                 $(".btn").val("连接");
 82                 $(".c_cen").hide();
 83             }
 84             //产生错误
 85             function errorWs(){
 86                 printMsg("您与服务器连接错误...","ERROR");
 87             }
 88 
 89             //点击发送按钮
 90             $(".send").click(function(){
 91                 var text = $(".setex").val();
 92                 if(text == null || text == "") return;
 93                 $(".setex").val("");
 94                 ws.send("【"+$(".user").val()+"】:"+text);
 95             });
 96             
 97             //点击连接
 98             $(".btn").click(function(){
 99                 if($(".add").val() && $(".user").val()){
100                     if(close){
101                         printMsg("正在准备连接服务器,请稍等...");
102                         var url = "ws://"+$(".add").val();
103                         if("WebSocket" in window){
104                             ws = new WebSocket(url);
105                         }else if("MozWebSocket" in window){
106                             ws = new MozWebSocket(url);
107                         }
108                         //已连接
109                         $(".btn").val("断开");
110                         close = false;
111                         
112                         //注册事件
113                         ws.onopen = function(){
114                             openWs();
115                         };
116                         ws.onmessage = function(event){
117                             msgWs(event);
118                         };
119                         ws.onclose = function(){
120                             closeWs();
121                         };
122                         ws.onerror = function(){
123                             errorWs();
124                         };
125                         
126                         //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
127                         window.onbeforeunload = function(){
128                             ws.send("【"+$(".user").val()+"】离开了聊天室");
129                             close = true;
130                             ws.close();
131                         };
132                         
133                     }else{
134                         ws.send("【"+$(".user").val()+"】离开了聊天室");
135                         close = true;
136                         ws.close();
137                     }
138                 }else{
139                     $.tmDialog.alert({open:"left",content:"服务器地址和用户名不能为空哦...",title:"提示哦~~~"});
140                 }
141             });
142             
143             //回车键
144             $(".setex").keypress(function(event){
145                 if(event.keyCode == 13){
146                     $(".send").trigger("click");
147                 }
148             });
149         </script>
150     </body>
151 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

HTML5 学习总结(五)——WebSocket与消息推送

B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为...

3808
来自专栏林德熙的博客

win10 UWP 发邮件

UWP 下如何发邮件?可以使用mailto:xx?subject=*方式发送? 本文:如何在 UWP 使用默认邮件发邮件。

1272
来自专栏软件开发

WebSocket与消息推送

B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为...

7105
来自专栏三丰SanFeng

Linux进程间通信(一) - 管道

管道(pipe) 普通的Linux shell都允许重定向,而重定向使用的就是管道。 例如:ps | grep vsftpd .管道是单向的、先进先出的、无结构...

2447
来自专栏牛肉圆粉不加葱

Spark Storage ② - BlockManager 的创建与注册

上一篇文章介绍了 Spark Storage 模块的整体架构,本文将着手介绍在 Storeage Master 和 Slave 上发挥重要作用的 BlockMa...

581
来自专栏Android群英传

一个字符解决Gradle aar编译参数传递问题是怎样一种体验

781
来自专栏编程

修复 Linux/Unix/OS X/BSD 系统控制台上的显示乱码

有时我的探索会在屏幕上输出一些奇怪的东西。比如,有一次我不小心用 cat 命令查看了一下二进制文件的内容 —— cat /sbin/*。这种情况下你将无法再访问...

2166
来自专栏企鹅号快讯

修复 Linux/Unix/OS X/BSD 系统控制台上的显示乱码

有时我的探索会在屏幕上输出一些奇怪的东西。比如,有一次我不小心用 cat 命令查看了一下二进制文件的内容 —— cat /sbin/*。这种情况下你将无法再访问...

2009
来自专栏向治洪

Android资源混淆打包方案

概述 我们知道在Android的打包过程中,有一个步骤是压缩,也是为了减少apk包的大小,其中在压缩的过程中,很大一部分就是对资源的压缩,除了系统的压缩方案之外...

33710
来自专栏转载gongluck的CSDN博客

打开文件open()函数的使用方法详解

头文件:#include <sys/types.h>    #include <sys/stat.h>    #include <fcntl.h> 定义函数...

2875

扫码关注云+社区

领取腾讯云代金券