一、什么是 WebSocket？
WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
二、WebSocket 的应用场景
WebSocket 的特点，决定了他在一些 实时双向通信、低延迟、推送等功能的应用场景下的独特优势。
在WebSocket 出现之前，Web 程序想要进行实时通信是非常麻烦的，因为 HTTP 是一种无状态、无连接、单向的应用层协议，它无法实现服务器主动向客户端推送消息，并且这种单向请求的特点，注定了客户端实时获取服务端的变化就非常麻烦，通常情况下，需要客户端频繁的对服务器进行轮询，这种方式不仅效率低，实时性不好，而且这种频繁的请求和响应对服务器来说也是一种负担。
三、WebSocket API
1、客户端/浏览器 API
由于 WebSocket 协议是 HTML5开始支持的，所以想要使用 WebSocket 协议，首先保证浏览器支持 HTML5.
websocket 对象创建
let ws = new WebSocket(URL);
注：这里的 url 格式为 协议://ip地址:端口号/访问路径。协议名称固定为 ws
websocket 事件
| 事件 | 事件处理程序 | 描述 |
| open | ws.onopen | 连接建立时触发 |
| message | ws.onmessage | 客户端接收服务端数据时触发 |
| error | ws.onerror | 通信发生错误时触发 |
| close | ws.onclose | 连接关闭时触发 |
websocket 方法
| 方法 | 描述 |
| ws.send() | 使用连接发送数据到服务器 |
| ws.close() | 关闭连接 |
2、服务端 API
Tomcat 从 7.0.5 版本开始支持 WebSocket，所以使用时注意 Tomcat 版本不能低于 7.0.5。在Java中，Endpoint 表示服务器 Websocket 连接的一端，可以视之为处理WebSocket消息的接口。Java 中可以通过两种方式定义Endpoint：
- 编程式：通过继承 javax.websocket.Endpoint并实现其方法。
- 注解式：通过添加 @ServerEndpoint 等相关注解。
Endpoint 实例在 WebSocket 握手时创建，并在客户端与服务端连接过程中有效，在连接关闭时结束，在Endpoint接口中就定义了其生命周期的相关方法：
| 方法 | 注解 | 描述 |
| onOpen | @OnOpen注解所标识的方法 | 连接建立时触发 |
| onError | @OnError注解所标识的方法 | 通信发生错误时触发 |
| onClose | @OnClose注解所标识的方法 | 连接关闭时触发 |
在 onOpen 方法中，将创建一个 Session 对象，表示当前 WebSocket 连接的会话，Session对象提供了一组方法，用于管理WebSocket连接和事件。例如：
服务端向客户端发送数据：
如果使用编程式的话，可以通过 Session 添加 MessageHandler 消息处理器来接收消息；如果采用注解式，可以在定义的 Endpoint 类中添加 @OnMessage 注解指定接收消息的方法。
服务端将数据推送给客户端：
在 Session 中维护了一个 RemoteEndpoint 实例，用来向客户端推送数据，我们可以通过 Session.getBasicRemote 获取同步消息发送实例，通过 Session.getAsyncRemote 获取异步消息发送实例，然后调用实例中的 sendXXX() 方法即可发送消息。
四、使用 webSocket 实现在线聊天室
上面说了那么多理论知识，主要是为了让大家对Websocket有个最基本的认识，下面就通过一个具体的场景《在线聊天室》来体会一下 Websocket 在实际中如何使用。
1、需求分析
这里我们实现的聊天室是比较简单的，主要功能就是能够实现实时消息的发送和接收，能够实时显示用户在线状态和在线人数。下面简单演示一下成品效果：
2、实现流程
3、消息格式
这里约定前后端的消息数据格式采用 json 格式进行传输。主要分为两大类消息：
- 客户端–>服务器：
{"toName":"张三","message":"你好"}
- 服务器–>客户端：
{"isSystem":true,"fromName":null,"message":["张三","李四"] } {"isSystem":false,"fromName":"张三","message":"你好" }
4、服务端功能实现
这部分我会详细介绍一下使用 websocket，后端如何进行api编写，至于登录功能，可以说是千篇一律，这里直接给出代码，不作为重点，也就不在展开介绍了。
（1）导入依赖
首先我们需要创建 SpringBoot 项目并导入 websocket 相关依赖：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
（2）登录模块实现
登录功能不是本次实现的重点，所以这里只是对密码进行了一个简单的校验，不涉及到数据库交互操作。
@RestController @RequestMapping("/user") public class UserController { /** * 登录 * @param user 提交的用户名和密码 * @param httpSession 提交的 * @return 成功信息 */ @PostMapping("/login") public Result login(User user, HttpSession httpSession) { if (user != null && (user.getPassword()).equals("123")) { // 将用户数据存储到session中 httpSession.setAttribute("user",user.getUsername()); System.out.println(httpSession); return Result.success("登录成功"); } else { return Result.failed(); } } /** * 获取当前登录的用户名 * @return 用户名 */ @GetMapping("/getusername") public Result login(HttpSession httpSession) { String username = (String) httpSession.getAttribute("user"); return Result.success(username); } }
（3）聊天室功能实现
@Component @ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class) public class ChatEndpoint { // 用来存储每一个客户端对象对应的ChatEndpoint对象 private static ConcurrentHashMap<String,ChatEndpoint> onlineClient = new ConcurrentHashMap<>(); // 声明session对象，通过该对象可以发生消息给指定的客户端 private Session session; // 声明Httpsession对象，里面记录了用户相关信息 private HttpSession httpSession; /** * 连接建立时调用 * @param session 当前连接的会话 * @param config Endpoint的配置对象 */ @OnOpen public void onOpen(Session session,EndpointConfig config) { try { // 初始化当前Endpoint的链接会话 this.session = session; // 初始化httpSession HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName()); this.httpSession = httpSession; // 将当前连接的ChatEndpoint对象存储到onlineClient容器中 String username = (String) httpSession.getAttribute("user"); onlineClient.put(username,this); // 将在线用户推送给所有客户端 // 1.获取消息 String message = MessageUtils.getMessage(true, null, getNames()); // 2.将消息广播给所有用户 broadcastAllUsers(message); } catch (Exception e) { e.printStackTrace(); } } private void broadcastAllUsers(String message) { Set<String> names = getNames(); try { for (String name : names) { // 获取当前用户的ChatEndpoint对象 ChatEndpoint client = onlineClient.get(name); // 使用session发送信息 client.session.getBasicRemote().sendText(message); } } catch (Exception e) { e.printStackTrace(); } } private Set<String> getNames() { return onlineClient.keySet(); } /** * 接收到客户端数据后调用 * @param message 消息信息 * @param session 当前连接的会话 */ @OnMessage public void onMessage(String message,Session session) { try { // 导入jackson核心类 ObjectMapper objectMapper = new ObjectMapper(); // 将JSON字符串序列化为Message对象 Message mess = objectMapper.readValue(message, Message.class); // 取出接收人 String toName = mess.getToName(); // 取出信息 String sendMess = mess.getMessage(); // 找到发送人姓名 String fromName = (String) httpSession.getAttribute("user"); // 进行消息构造 String finalMess = MessageUtils.getMessage(false, fromName, sendMess); // 根据接收人找到对应的连接 ChatEndpoint chatEndpoint = onlineClient.get(toName); if (chatEndpoint == null) { // 这里可以抛出异常 // ... // 打印日志 System.out.println("找不到对应的客户端！userName = "+toName); return; } // 使用对应的会话Session发送给对应的客户端 chatEndpoint.session.getBasicRemote().sendText(finalMess); } catch (Exception e) { e.printStackTrace(); } } /** * 连接过程中发生错误时调用 */ @OnError public void onError(Session session, Throwable error) { System.out.println("websocket连接出错，错误原因:"+error.getMessage()); } /** * 关闭连接时调用 */ @OnClose public void onClose(Session session) { try { // 1.清除容器中的该ChatEndpoint对象 String username = (String) httpSession.getAttribute("user"); onlineClient.remove(username); // 2.向所有客户端广播下线通知 Set<String> names = getNames(); // 3.构造消息 String message = MessageUtils.getMessage(true,null,getNames()); // 4.广播给其他用户 broadcastAllUsers(message); } catch (Exception e) { e.printStackTrace(); } } }
需要注意的是：
事实上当@Component注解和@ServerEndpoint(“/chat”)注解同时使用时，Spring并不会将ChatEndpoint这个类注册为服务器的端点，我们还需要需要注册一个 ServerEndpointExporter bean，它会自动扫描带有@ServerEndpoint注解的类，并将其注册为WebSocket端点，以便客户端可以连接和通信：
@Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
在WebSocket中，每次客户端与服务器建立连接时，都会创建一个新的ChatEndpoint实例来处理该连接。因此，每个WebSocket连接都有其自己的ChatEndpoint实例，this指向的是当前连接对应的实例，所以在ChatEndpoint类中使用了一个static类型的集合将所有的连接记录起来，便于之后的消息处理。
在客户端与服务端建立连接时，上述的静态集合中是以 键-值 方式存储每个客户端的ChatEndpoint实例的，为了区分，这里以登录的用户名作为键，所以需要获取到HttpSession，再从Httpsession中获取到用户名，但是在OnOpen方法中无法直接获取当前登录的 Httpsession，此时我们可以借助OnOpen中的另一个参数 EndpointConfig config，将Httpsession存储到EndpointConfig对象中，在从EndpointConfig对象中获取到Httpsession，因此我们需要进行如下配置：
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator { @Override public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) { // 获取到httpSession HttpSession httpSession = (HttpSession) request.getHttpSession(); // 将httpSession存储到EndpointConfig中 sec.getUserProperties().put(HttpSession.class.getName(),httpSession); } }
5、客户端交互功能实现
客户端这里主要介绍一下前后端交互的逻辑，具体页面实现我们暂时不关心。
（1）登录页面前后端交互
登录页面的前后端交互主要采用 jQuery 发送 Ajax 请求完成，整体思路很简单，这里给出 js 代码：
<script> function login(){ // 1.参数校验 var username = jQuery("#username"); var password = jQuery("#password"); if (username.val().trim() == "") { username.focus(); alert("请输入用户名!") return false; } if (password.val().trim() == "") { username.focus(); alert("请输入密码!"); return false; } // 2.将参数提交给后端 jQuery.ajax({ url:"/user/login", type:"POST", data:{ "username":username.val().trim(), "password":password.val().trim() }, success:function(res) { console.log(res); // 3.将结果返回给用户 if (res.flag) { // 登录成功! // alert("登录成功!"); // 跳转到主页 location.href="main.html"; } else { // 登录失败! alert("登录失败，用户名或密码错误！"); } } }); } </script>
（2）聊天页面的前后端交互
在聊天页面这里，使用到 vue 进行处理，可能理解起来稍微有点复杂，大家可以自行参考：
<body> <div class="abs cover contaniner" id="app"> <div class="abs cover pnl"> <div class="top pnl-head" style="padding: 20px ; color: white;"> <div id="userName"> 用户：{{username}} <span style='float: right;color: green' v-if="isOnline">在线</span> <span style='float: right;color: red' v-else>离线</span> </div> <div id="chatMes" v-show="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体"> 正在和 <font face="楷体">{{toName}}</font> 聊天 </div> </div> <!--聊天区开始--> <div class="abs cover pnl-body" id="pnlBody"> <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%"> <div class="abs cover pnl-left" id="chatArea" v-show="isShowChat"> <div class="abs cover pnl-msgs scroll" id="show"> <div class="pnl-list" id="hists"><!-- 历史消息 --></div> <div class="pnl-list" id="msgs" v-for="message in historyMessage"> <!-- 消息这展示区域 --> <div class="msg guest" v-if="message.toName"> <div class="msg-right"> <div class="msg-host headDefault"></div> <div class="msg-ball">{{message.message}}</div> </div> </div> <div class="msg robot" v-else> <div class="msg-left" worker=""> <div class="msg-host photo" style="background-image: url(img/avatar/Member002.jpg)"></div> <div class="msg-ball">{{message.message}}</div> </div> </div> </div> </div> <div class="abs bottom pnl-text"> <div class="abs cover pnl-input"> <textarea class="scroll" id="context_text" @keyup.enter="submit" wrap="hard" placeholder="在此输入文字信息..." v-model="sendMessage.message"></textarea> <div class="abs atcom-pnl scroll hide" id="atcomPnl"> <ul class="atcom" id="atcom"></ul> </div> </div> <div class="abs br pnl-btn" id="submit" @click="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);"> 发送 </div> <div class="pnl-support" id="copyright"><a href="https://blog.csdn.net/LEE180501?spm=1000.2115.3001.5343">仅供学习参考</a></div> </div> </div> <!--聊天区 结束--> <div class="abs right pnl-right"> <div class="slider-container hide"></div> <div class="pnl-right-content"> <div class="pnl-tabs"> <div class="tab-btn active" id="hot-tab">好友列表</div> </div> <div class="pnl-hot"> <ul class="rel-list unselect"> <li class="rel-item" v-for="friend in friendsList"><a @click='showChat(friend)'>{{friend}}</a> </li> </ul> </div> </div> <div class="pnl-right-content"> <div class="pnl-tabs"> <div class="tab-btn active">系统广播</div> </div> <div class="pnl-hot"> <ul class="rel-list unselect" id="broadcastList"> <li class="rel-item" style="color: #9d9d9d;font-family: 宋体" v-for="name in systemMessages">您的好友 {{name}} 已上线</li> </ul> </div> </div> </div> </div> </div> </div> </div> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> <script> let ws; new Vue({ el: "#app", data() { return { isShowChat: false, chatMes: false, isOnline: true, username:"", toName: "", sendMessage: { toName: "", message: "" }, inputMessage: "", historyMessage: [ ], friendsList: [ ], systemMessages : [ ] } }, created() { this.init(); }, methods: { async init() { await axios.get("user/getusername").then(res => { this.username = res.data.message; }); //创建webSocket对象 ws = new WebSocket("ws://127.0.0.1:8080/chat"); //给ws绑定事件 ws.onopen = this.onopen; //接收到服务端推送的消息后触发 ws.onmessage = this.onMessage; ws.onclose = this.onClose; }, showChat(name) { this.toName = name; //清除聊天区的数据 let history = sessionStorage.getItem(this.toName); if (!history) { this.historyMessage = []; } else { this.historyMessage = JSON.parse(history); } //展示聊天对话框 this.isShowChat = true; //显示“正在和谁聊天” this.chatMes = true; }, submit() { this.sendMessage.toName = this.toName; this.historyMessage.push(JSON.parse(JSON.stringify(this.sendMessage))); sessionStorage.setItem(this.toName, JSON.stringify(this.historyMessage)); ws.send(JSON.stringify(this.sendMessage)); this.sendMessage.message = ""; }, onOpen() { this.isOnline = true; }, onClose() { sessionStorage.clear(); this.isOnline = false; }, onMessage(evt) { //获取服务端推送过来的消息 var dataStr = evt.data; //将dataStr 转换为json对象 var res = JSON.parse(dataStr); //判断是否是系统消息 if(res.system) { //系统消息 好友列表展示 var names = res.message; this.friendsList = []; this.systemMessages = []; for (let i = 0; i < names.length; i++) { if(names[i] != this.username) { this.friendsList.push(names[i]); this.systemMessages.push(names[i]); } } }else { //非系统消息 var history = sessionStorage.getItem(res.fromName); if (res.fromName == this.toName) { if (!history) { this.historyMessage = [res]; } else { this.historyMessage.push(res); } sessionStorage.setItem(res.fromName, JSON.stringify(this.historyMessage)); } else { if (!history) { sessionStorage.setItem(res.fromName, JSON.stringify([res])); } else { let messages = JSON.parse(history); messages.push(res); sessionStorage.setItem(res.fromName, JSON.stringify(messages)); } } } } } }); </script>
6、聊天室完整资源
完整资源请点击： Gitee 在线聊天室
