记一次WebSocket应用聊天室的小应用

骑猪看日落 2021-09-21 14:52 333阅读 0赞

前提：在3年前笔者做过一个功能，当时没有记录，物联网中的终端有异常会发送给服务器，然后服务器要通知给web浏览器，就是异常通知，笔者就是通过websocket做的。对还可以用现成的实时通信框架，但是那些都有收费。恰好前几天有类似的需求，在这里总结一下，做个小项目记录

1：pom文件导入websocket包

<dependency>
        <groupId>javax.websocket</groupId>
        <artifactId>javax.websocket-api</artifactId>
        <version>1.1</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-api</artifactId>
        <version>7.0</version>
    </dependency>

2：编写页面和js

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>HanppyRoom</title>
    	<script>
    		//注意url必须是可以访问到你项目里的 --最好是可以通过外网能访问到
    		var url = "ws://xxx.xxx.xxx:82/userErp/xiaomage/";
    		var ws = null;
    		//加入聊天室
    		function joinRoom() {
    			if (ws) {
    				alert("你已经在聊天室，不能再加入");
    				return;
    			}
    			var username = document.getElementById("user").value;
    			ws = new WebSocket(url + username);
    			//与服务端建立连接触发
    			ws.onopen = function () {
    				console.log("与服务器成功建立连接")
    			};
    			//服务端推送消息触发
    			ws.onmessage = function (ev) {
    				talking(ev.data);
    			};
    
    			//发生错误触发
    			ws.onerror = function () {
    				console.log("连接错误")
    			};
    			//正常关闭触发
    			ws.onclose = function () {
    				console.log("连接关闭");
    			};
    		}
    
    		//退出聊天室
    		function exitRoom() {
    			closeWebSocket();
    		}
    
    		function sendMsg() {
    			if(!ws){
    				alert("你已掉线，请重新加入");
    				return;
    			}
    			//消息发送
    			ws.send(document.getElementById("sendMsg").value);
    			document.getElementById("sendMsg").value = "";
    
    
    		}
    
    		function closeWebSocket() {
    			if(ws){
    				ws.close();
    				ws = null;
    			}
    		}
    
    		function talking(content) {
    			document.getElementById("content").append(content + "\r\n");
    		}
    	</script>
    </head>
    <body>
    <div >
    	<br>欢迎使用<strong>小码哥</strong>极简聊天室：<br/><br/>
    	<textarea id="content" cols="60" rows="30" readonly="readonly"></textarea><br>
    	<input type="text" id="sendMsg">
    	<button type="button" onclick="sendMsg()">发送消息</button>
    	<br/><br/>
    	用户：<input type="text" id="user">
    	<button onclick="joinRoom()">加入群聊</button>
    	<button onclick="exitRoom()">退出群聊</button>
    </div>
    </body>
    </html>

3:编写服务端

package com.mlf.video.web;
    
    import org.springframework.stereotype.Component;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * @ServerEndpoin 注解声明该类为 WebSocket 的服务端端点
     * value 值为监听客户端访问的 URL
     */
    @Component
    @ServerEndpoint(value = "/xiaomage/{username}")
    public class WsByTomcat {
    
    	//这里只是简单测试用，真正的场景请考虑线程安全的容器或其它并发解决方案
    	private static List<Session> sessions = new ArrayList<>();
    
    	/**
    	 * @param session  与客户端的会话对象【可选】
    	 * @param username 路径参数值 【可选】
    	 * @throws IOException
    	 * @OnOpen 标注此方法在 ws 连接建立时调用，可用来处理一些准备性工作 可选参数
    	 * EndpointConfig（端点配置信息对象） Session 连接会话对象
    	 */
    	@OnOpen
    	public void OnOpen(Session session, @PathParam("username") String username) throws IOException {
    		sessions.add(session);
    		sendTextMsg("好友 [" + username + "] 加入群聊");
    	}
    
    	/**
    	 * @param msg      接受客户端消息
    	 * @param username RESTful 路径方式获取用户名
    	 * @throws IOException
    	 * @OnMessage 在收到客户端消息调用 消息形式不限于文本消息，还可以是二进制消息(byte[]/ByteBuffer等)，ping/pong 消息
    	 */
    	@OnMessage
    	public void OnMsg(String msg, @PathParam("username") String username) throws IOException {
    		sendTextMsg(username + "：\r\n" + msg);
    	}
    
    
    	/**
    	 * @OnClose 连接关闭调用
    	 */
    	@OnClose
    	public void OnClose(Session session, @PathParam("username") String username) throws IOException {
    		sessions.remove(session);
    		sendTextMsg("好友 ["+username + "] 退出群聊");
    	}
    
    	/**
    	 * @param e 异常参数
    	 * @OnError 连接出现错误调用
    	 */
    	@OnError
    	public void OnError(Throwable e) {
    		e.printStackTrace();
    	}
    
    	private void sendTextMsg(String msg) {
    		for (Session session : sessions) {
    			session.getAsyncRemote().sendText(msg);
    		}
    	}
    }

4：测试页面访问

先编写一个controller跳转到页面

@RequestMapping(value = "/a")
    	public String ssss(Object o) {
    		return "/jsp/udp123";
    	}

页面访问

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MjU5NTM5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MjU5NTM5_size_16_color_FFFFFF_t_70]: /images/20210920/e44d6c9f33b54282a5dd009cf06a1eb2.png