注意：8080改80端口  默认工程改为/

前端页面

<!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;
		}
		.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">
			<span>请输入昵称：</span>
			<input type="text" id="nickname">
			<button onclick="connect()">连接聊天室</button>
		</div>
		<div class="msg">
			
		</div>
		<div class="send-msg">
			<input type="text">
			<button>发  送</button>
		</div>
	</div>
	<script>
		function connect(){
			//alert("点击了连接按钮");
			//1、获取昵称
			var nickname = document.getElementById("nickname").value;
			//2、和服务器建立长连接
			//ws://  websocket协议
			//127.0.0.1 服务主机地址
			//长连接接口
			var ws = new WebSocket("ws://127.0.0.1/chatServer/"+nickname);

		}
	</script>
</body>
</html>

后端接口

package web;

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;

/**
 * 长连接接口
 */
//value 写接口地址
@ServerEndpoint(value = "/chatServer/{nickName}")
public class ChatServer {
	@OnOpen
	public void onOpen(Session s) {
		//长连接建立时调用
		System.out.println("长连接建立成功");
	}
	@OnClose
	public void onClose(Session s) {
		//长连接关闭时调用
	}
	@OnMessage
	public void onMessage(String msg,Session s) {
		//收到客户端发的信息时调用
	}
	@OnError
	public void onError(Session s,Throwable error) {
		//异常时调用
	}
}

 

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