WebSocket入门:实现简单聊天室

最新推荐文章于 2024-09-24 16:57:28 发布

阿云_

最新推荐文章于 2024-09-24 16:57:28 发布

阅读量446

点赞数 1

分类专栏： WebSocket 文章标签： WebSocket入门实现聊天室 html5 WebSocket

本文链接：https://blog.csdn.net/xcy1193068639/article/details/79778389

版权

WebSocket 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

本博客主要讲简单的实现，属于入门篇，直接上代码吧。

服务端 WebServer.java

@ServerEndpoint("/chat")
public class WebServer {
	
	private Session session = null;
	private static CopyOnWriteArraySet<WebServer> servers = new CopyOnWriteArraySet<WebServer>();
	
	@OnOpen
	public void onOpen(Session session) {
		this.session = session;
		servers.add(this);
		System.out.println("已连接" + session.getId());
	}
	
	@OnMessage
	public void onMessage(String msg) {
		System.out.println("客户端发送的消息" + msg);
		try {
			for (WebServer webServer : servers) {
				webServer.session.getBasicRemote().sendText(msg);				
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	@OnClose
	public void onClose() {
		System.out.println(this.session.getId() + "退出了聊天室");
		servers.remove(this);
	}
}

登陆页面 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
</head>
<body>
	<form action="webSocketServlet" method="post">
		<input type="text" name="logName"/>
		<input type="submit" value="进入聊天室">
	</form>
</body>
</html>

聊天室页面 chat.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chatroom</title>
</head>
<body>
	<textarea rows="20" cols="20" id="content"></textarea>
	<form action="">
		<input type="text" id="message"/>
		<input type="submit" οnclick="toShow();return false;" value="发送">
	</form>
</body>
	<% String username = (String)request.getAttribute("username");%>
	<script type="text/javascript">
		function showMessage(msg){
			var value = document.getElementById("content").value;
			document.getElementById("content").value = value + "\n"+msg;
		}
		
		function toShow(){
			var val = document.getElementById("message").value;
			ws.send("[<%=username%>]说: " + val);	
			document.getElementById("message").value = "";
		}
		
		var ws = null;
		if (WebSocket) {
			ws = new WebSocket("ws://localhost:8082/websocket-demo/chat");
		}else{
			alert("不支持websocket！");
		}
		
		ws.onopen = function(){
			ws.send("<%=username%>进入聊天室");
			document.getElementById("message").focus();
		}
		
		ws.onmessage = function(event){
			showMessage(event.data);
		}
		
		window.onunload = function (){
			ws.send("<%=username%>退出聊天室");
			ws.close();
		}
	</script>
</html>

处理登陆的servlet WebSocketServlet.java

@WebServlet("/WebSocketServlet")
public class WebSocketServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String logName = request.getParameter("logName");
		request.setAttribute("username", logName);
		request.getRequestDispatcher("chat.jsp").forward(request, response);
	}
}

最后，web.xml配置上servlet

<servlet>
    <servlet-name>webSocketServlet</servlet-name>
    <servlet-class>com.learn.websocket.WebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>webSocketServlet</servlet-name>
    <url-pattern>/webSocketServlet</url-pattern>
</servlet-mapping>