index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>相亲相爱一家人聊天室</title>
	<link rel="stylesheet" href="">
	<style>
		*{margin: 0;padding: 0;}
		body{
			background-color: #ccc;
		}
		.box{
			width: 600px;
			height: 740px;
			margin: 0 auto;
			margin-top: 50px;
			border-radius: 20px;
			background-color: #fff;
			overflow: hidden;
		}
		.conn{
			width: 100%;
			height: 35px;
			background-color: #777;
			border-radius: 5px;
			margin-top: 15px;
		}
		.conn > span{
			width: 20%;
			height: 35px;
			text-align: center;
			line-height: 35px;
			float: left;
			color: #fff;
		}
		.conn > input{
			display: block;
			width: 60%;
			height: 33px;
			border: 0px;
			float: left;
		}
		.conn > button{
			width: 20%;
			height: 35px;
			float: left;
			border-radius: 6px;
			cursor: pointer;
		}

		.msg{
			width: 100%;
			height: 600px;
			overflow-y:auto;
			overflow-x:hidden;
		}
		.send-msg{
			width: 100%;
			height: 65px;
		}
		.send-msg > input{
			display: block;
			width: 79%;
			height: 60px;
			float: left;
			font-size: 20px;
		}
		.send-msg > button{
			width: 20%;
			height: 65px;
			font-size: 30px;
			float: left;
			border-radius: 6px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 连接聊天室使用 -->
		<div class="conn" id="userMsg">
			<span>请输入昵称：</span>
			<input type="text" id="nickname">
			<button onclick="connect()">连接聊天室</button>
		</div>
		<div class="msg" id="msg">
			
		</div>
		<div class="send-msg">
			<input type="text" id="umsg" maxlength="200">
			<button  onclick="send()">发  送</button>
		</div>

	</div>
	<script>
		var ws = null;
		function connect(){
			//alert("点击了连接按钮");
			//1、获取昵称
			var nickname = document.getElementById("nickname").value;
			//2、和服务器建立长连接
			//ws://  websocket协议
			//127.0.0.1 服务主机地址
			//长连接接口
			ws = new WebSocket("ws://192.168.0.151/chatServer/"+nickname);
			ws.onopen=function(){
				setMsg("和聊天服务器连接成功！！！");
				//把连接功能隐藏掉
				document.getElementById("userMsg").style.display = "none";
			}
			ws.onmessage=function(event){//服务器发给我们的信息
				console.log(event.data);
				//json格式化一下
				var data = JSON.parse(event.data);
				//修复可以发标签的bug
				setMsg(data.nick+"说："+data.msg);
			}

			ws.onclose=function(){
				
			}
			ws.onerror=function(){
				
			}
		}
		var isMsg = true;
		function send(){
			if(isMsg){
				//获取用户输入的话
				var umsg = document.getElementById("umsg").value;
				//清楚掉发生的数据
				document.getElementById("umsg").value = "";
				ws.send(umsg);
				isMsg = false;
				setTimeout(function(){
					isMsg = true;
				}, 3000);
			}else{
				setMsg("发送频率过快3秒后发送！！！");
			}
		}

		//添加信息的方法
		function setMsg(msg){
			//往消息框追加内容 并换行
			var omsg = document.getElementById("msg");
			omsg.innerHTML += msg +"</br>";
			omsg.scrollTop = omsg.scrollHeight;
		}
		
		//监听回车
		document.onkeydown = function (event) {
	        var e = event || window.event;
	        if (e && e.keyCode == 13) { //回车键的键值为13
	        	send();
	        }
	    };
	</script>
</body>
</html>

ChatServer.java

package web;

import java.io.IOException;
import java.util.HashSet;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

/**
 * 长连接接口
 */
//value 写接口地址
@ServerEndpoint(value = "/chatServer/{nickName}")
public class ChatServer {
	//把所以连接用户放到set集合
	private static Set<Session> users = new HashSet<Session>();
	@OnOpen
	public void onOpen(Session s) {
		//长连接建立时调用
		//System.out.println("长连接建立成功");
		users.add(s);
	}
	@OnClose
	public void onClose(Session s) {
		//长连接关闭时调用
		users.remove(s);
	}
	@OnMessage
	public void onMessage(String msg,Session s,@PathParam("nickName")String nickName) {
		//收到客户端发的信息时调用
		for (Session session : users) {//循环广播
			String msgJson = "{\"nick\":\""+nickName+"\",\"msg\":\""+deleteAllHTMLTag(msg)+"\"}";
			try {
				//发送信息
				session.getBasicRemote().sendText(msgJson);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	@OnError
	public void onError(Session s,Throwable error) {
		//异常时调用
		users.remove(s);
	}
	
	/**
	  * 删除所有的HTML标签
	  *
	  * @param source 需要进行除HTML的文本
	  * @return
	  */
	public static String deleteAllHTMLTag(String source) {

	  if(source == null) {
	       return "";
	  }
	  String s = source;
	  /** 删除普通标签  */
	  s = s.replaceAll("<(S*?)[^>]*>.*?|<.*? />", "");
	  /** 删除转义字符 */
	  s = s.replaceAll("&.{2,6}?;", "");
	  return s;
	}
}

 

最后修改于 2021-09-18 16:40:48
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇