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>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-03-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云服务器
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。
腾讯云开发者
