九阴真经


Springboot-websocket案例

<h5>Java服务端:</h5> <pre><code>package com.example.demo714.socket; import org.springframework.stereotype.Component; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.Set; import java.util.UUID; @Component @ServerEndpoint("/chat") public class WebSocket { private Session session; /** * 存当前连接对象 * 分布式项目应该考虑共享存储介质 如Redis Es 数据库等 */ private static HashMap&lt;String, WebSocket&gt; hashMap = new HashMap&lt;&gt;(); //用户名 private String userName; /** * 保存用户昵称信息 */ private HashMap&lt;String, String&gt; hashMap1 = new HashMap&lt;&gt;(); @OnOpen public void onopen(Session session) { this.session = session; hashMap.put(session.getId(), this); try { //实时推送数据 Thread.sleep(1000); //大屏建立连接就推送 String now = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()).trim(); sendMsg("第一个websocket:" + now); } catch (InterruptedException e) { e.printStackTrace(); } } @OnMessage public void message(String message, Session session) { this.userName = message; hashMap1.put(session.getId(), userName); String msg = userName + "进入聊天室"; sendMsg(msg); } public static void sendMsg(String msg) { System.out.println("进来了..."); //广播消息给所有客户端 Set&lt;String&gt; set = hashMap.keySet(); for (String s : set) { WebSocket chient = hashMap.get(s); try { Session session1 = chient.session; if (session1 == null) { System.out.println("客户端已经关闭"); return; } System.out.println("推送....."); session1.getBasicRemote().sendText(msg); } catch (IOException e) { e.printStackTrace(); } } } @OnClose public void close(Session session) { String msg = hashMap1.get(session.getId()) + "退出聊天室"; //广播消息给所有客户端 sendMsg(msg); } } package com.example.demo714.ctl; import com.alibaba.fastjson.JSONObject; import com.example.demo714.socket.WebSocket; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import java.text.SimpleDateFormat; import java.util.Date; import java.util.UUID; @RestController public class TestCtl { @GetMapping("/a") public Object a() { String now = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()).trim(); //数据变化后推送 WebSocket.sendMsg(now); return "a" + UUID.randomUUID().toString().replace("-", ""); } @PostMapping("/b") public Object b(@RequestBody JSONObject jsonObject) { return jsonObject; } } </code></pre> <h5>html</h5> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body onload="a();b()"&gt; &lt;div style="width:1000px;height:400px;"&gt; &lt;ul id="content" style="background-color: yellow; margin-left: 400px; margin-top: 200px;"&gt;&lt;/ul&gt; &lt;ul id="content1" style="background-color: yellow; margin-left: 400px; margin-top: 200px;"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;form class="form"&gt; &lt;/form&gt; &lt;script&gt; var oUl=document.getElementById('content'); var oUl1=document.getElementById('content1'); var oConnect=document.getElementById('connect'); var oConnect1=document.getElementById('connect1'); var unconnect=document.getElementById("unconnect"); var ws=new WebSocket('ws://localhost:8080/chat'); function a(){ ws.onopen=function(){ oUl.innerHTML+="&lt;li&gt;客户端已连接&lt;/li&gt;"; } ws.onmessage=function(evt){ oUl.innerHTML="&lt;li&gt;"+evt.data+"&lt;/li&gt;"; } ws.onclose=function(){ oUl.innerHTML+="&lt;li&gt;客户端已断开连接&lt;/li&gt;"; }; ws.onerror=function(evt){ oUl.innerHTML+="&lt;li&gt;"+evt.data+"&lt;/li&gt;"; }; } var ws1=new WebSocket('ws://localhost:8080/chat1'); function b(){ ws1.onopen=function(){ oUl1.innerHTML+="&lt;li&gt;客户端已连接&lt;/li&gt;"; } ws1.onmessage=function(evt){ oUl1.innerHTML="&lt;li&gt;"+evt.data+"&lt;/li&gt;"; } ws1.onclose=function(){ oUl1.innerHTML+="&lt;li&gt;客户端已断开连接&lt;/li&gt;"; }; ws1.onerror=function(evt){ oUl1.innerHTML+="&lt;li&gt;"+evt.data+"&lt;/li&gt;"; }; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre>

页面列表

ITEM_HTML