使用html5中webSocket开发一个网页版聊天室(后台使用java)

比眉伴天荒 2023-01-04 14:38 149阅读 0赞

[ajax版聊天室][ajax]

大家可以对比一下，**ajax版的网页聊天室**和**webSocket版的网页聊天室**有什么区别和不同点。

先打开我的火狐浏览器，再依次打开我的Microsoft Edge浏览器和IE11浏览器，

在火狐浏览器中发送消息给服务器端，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![20210110193953102.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9][]

**前端页面代码**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(webSocket)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(webSocket)</h3>
    <input type="text" id="chatMessage" />
    <input type="button" style="width: 100px;" value="发送" onclick="sendMsg();" />
    <input type="button" style="width: 100px;" value="关闭" onclick="closeMsg();" />
    <div id="show" style="height: 600px;overflow: auto;">
    </div>
    </body>
    <script type="text/javascript">
    
    function $(elementId) {
    	return document.getElementById(elementId);
    }
    
    var websocket = null;
    if ('websocket' in window) {
    	console.log(window);
    //注意：测试的时候，地址也要写http://localhost:8888/ 不能写http://127.0.0.1:8888/
    	websocket = new WebSocket("ws://localhost:8888/html5Demo/MsgWebSocket");
    } else {
    	$('show').innerHTML += "警告!您的浏览器不支持webSocket!";
    }
    
    //打开websocket连接
    websocket.onopen = function() {
    // WebSocket已连接上，使用send()方法发送数据
    var str1 = 'WebSocket已连接上....模拟聊天室';
    var str2 = '<font style="color: blue; font-size: 20px;">' + str1 + '</font><br />';
    	$('show').innerHTML += str2;
    };
    
    //向服务器端发送信息
    function sendMsg() {
    	var msg = $('chatMessage').value;
    	$('chatMessage').value = '';
    	websocket.send(msg);
    }
    
    //接收服务端推送过来的消息
    websocket.onmessage = function(evt) {
    	var serverReturnData = evt.data;
    	console.log(serverReturnData);
    	document.getElementById('show').innerHTML += "收到消息：" + serverReturnData
    			+ "<br />";
    };
    
    //关闭
    function closeMsg() {
    	websocket.send("有用户掉线了！！");
    	websocket.close();
    }
    
    //浏览器关闭前，回调函数，防止服务器端抛异常
    window.onbeforeunload = function() {
    	websocket.close();
    }
    </script>
    </html>

**后端java代码**

package com.test;
    
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    import javax.websocket.OnOpen;
    import javax.websocket.OnMessage;
    import javax.websocket.OnClose;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    
    @ServerEndpoint(value = "/MsgWebSocket")
    public class MsgWebSocket {
    
    	// 当每一个连接来的时候都会实例化一个MsgWebSocket
    	private static CopyOnWriteArraySet<MsgWebSocket> webSockets = new CopyOnWriteArraySet<>();
    	// 与任何一个客户端的连接都有会话
    	private Session session;
    
    	@OnOpen
    	public void onOpen(Session session) {
    		this.session = session;
    		webSockets.add(this);
    		System.out.println("***有新用户上线***");
    //		sendMsgToOthers("有新用户上线");
    		sendMsgToOthers("我上线啦....");
    	}
    
    	@OnClose
    	public void onClose(Session session) {
    		this.session = session;
    		webSockets.remove(this);
    	}
    
    	// 给其他所有用户发送消息，不给自己发
    	private void sendMsgToOthers(String message) {
    		for (MsgWebSocket item : webSockets) {
    			System.out.println("***" + this.session + "***" + item.session.getId());
    			// 不给自己发送(谁发的消息，就不给谁转发)
    //			if (this.session.getBasicRemote().equals(item.session.getBasicRemote())) {
    //				continue;
    //			}
    			// 封装一个给每个session发送消息的方法
    			item.sendMessage(this.session.getId() + "说：" + message);
    		}
    	}
    
    	private void sendMessage(String message) {
    
    		try {
    			this.session.getBasicRemote().sendText(message);
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    
    	}
    
    	/*
    	 * 当服务器接收到消息的时候，做消息转发
    	 */
    	@OnMessage
    	public void onMessage(String message, Session session) {
    		System.out.println("来自客户端的消息：" + message);
    		// 当有消息来临时，给除去自己外的所有人发送消息
    		sendMsgToOthers(message);
    	}
    }

**大家可以根据我的案例，自己测试一下！**

**以下几篇文章也可以参考**

**[Eclipse创建WebSocket][Eclipse_WebSocket]**

**[Tomcat7 配置 WebSocket][Tomcat7 _ WebSocket]**

**[WebSocket快速入门][WebSocket]**

**[eclipse websocket示例][eclipse websocket]**

[ajax]: https://blog.csdn.net/czh500/article/details/108112888
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221119/28eacdba64ec4cfe965009c65cb0a2dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221119/577815185409452aa64baad34582a007.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221119/10099db9fda842c1a37420088aaf7f98.png
[20210110193953102.png]: /images/20221119/06a3aa5adf944f07bba3b389a4f752c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221119/f05f45bc4ce147a78ae797588defabd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221119/5c6b14c49665414bbee61207265d45b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221119/4fca9021adcb44fe9b351866256db193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221119/684aaf0a13f3446a801685eba83b72ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 7]: /images/20221119/aa2248b8209d474396506e37f7b92068.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 8]: /images/20221119/7539c30a9582490d8bd86f8d7f236a2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 9]: /images/20221119/713f09731c4b4627b9e128aedd41a611.png
[Eclipse_WebSocket]: https://blog.csdn.net/qq_42274641/article/details/83339960
[Tomcat7 _ WebSocket]: https://blog.csdn.net/icanflylzx2012/article/details/41451179?utm_medium=distribute.pc_relevant.none-task-blog-searchFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-searchFromBaidu-2.control
[WebSocket]: https://www.cnblogs.com/h--d/p/11492437.html
[eclipse websocket]: https://www.pianshen.com/article/70381007515/