初识WebSocket

用Java和JavaScript基于WebSocket完成聊天室Demo

什么是WebSocket，WebSocket是一种基于TCP的网络协议，就像HTTP一样，它与HTTP最大的不同就是它是全双工的，也就是服务器可以主动发送数据给浏览器（是不是像Java中的Socket）。在HTTP中，浏览器发起请求之后服务器才能响应，给浏览器发送数据，服务器不能主动给浏览器发送数据。
但是在很多时候，最简单的就比如聊天室，在Http中只能采用轮训的方式，也就是浏览器不停地访问服务器查询有没有消息，这样做效率很低，而且非常浪费流量，WebSocket就是解决“服务器无法主动推送数据”这一难点而发明的。

目前浏览器基本都支持WebSocket，这种协议有着如下特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

websocket以ws开头，一个标准的ws网址像这样：

ws://ip:port/path

其中IP可以被域名代替。下面我会给出一个websocket下的聊天室Demo

基于WebSocket的聊天室Demo

环境：JDK 1.8.0_211
开发工具：IDEA
项目管理工具：maven
前端页面：bootstrap

代码有详细的注释，应该比较好懂的。

前端页面：

chat.html

<!DOCTYPE html> <html lang="zh"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">      <title>基于WebSocket的在线聊天室</title>     <link href="css/bootstrap.min.css" rel="stylesheet">      <style>         .chatFont {             /* 消息字体大小 */             font-size: 16px;         }          .input {             /* 输入框绝对定位 */             position: fixed;             top: 75%;             right: 3%;             width: 70%;             font-size: 16px;         }     </style> </head> <body> <!--侧边栏--> <div class="column col-xs-3" id="sidebar">     <h3 class="text-center">在线人员</h3>     <ul class="nav" id="onlineUser">     <!-- 在线用户显示在这里 -->     </ul> </div>  <div class="col-xs-9">     <div class="panel panel-info">         <div class="panel-heading"><h3>聊天室</h3></div>         <div class="panel-body" id="show" style="height: 380px;">         <!-- 消息显示在这里 -->             <div class="chatFont">聊天记录<br></div>         </div>     </div>     <div class="input">         <label for="msg">请输入</label>         <textarea class="form-control" rows="5" id="msg"></textarea>     </div> </div>  </body> <script src="js/jquery-3.4.1.js"></script> <script src="js/bootstrap.min.js"></script> <script>     //这个num是用来限制消息条数，不然消息会撑破面板（前端技术太渣只能用这种笨办法）     var num = 1;     // 创建WebSocket对象     var socket = new WebSocket("ws://localhost:8080/chat");     //发送消息     var sendMsg = function () {         var input = $('#msg');         if (input.val()) {             socket.send(input.val());         } else {             alert('消息不能为空')         }         //清空输入框         input.val("");     };      //输入框键盘事件检测     var keyDown = function (e) {         if (!e.ctrlKey && e.keyCode == 13) { // enter 键             sendMsg();         } else if (e.keyCode == 13 && e.ctrlKey) {             //实现换行，这个没写             alert('ctrl enter');         }     };     //绑定输入框键盘事件     $('#msg').keydown(keyDown);      //websocket监听事件，收到消息时触发     socket.onmessage = function (ev) {         //console.log(ev);         showMsg(ev.data);     };     //显示消息     var showMsg = function (data) {         //后端使用Json传输         data = JSON.parse(data);         //如果有消息则显示在消息框         if (data.msg) {             var text = '<div class="chatFont">' + '[' + data.userName + ']:' + data.msg + '<br></div>';             $('#show').append(text);         }         //如果是新用户则添加在线成员，针对新用户         if (data.onlineUser) {             console.log(data.onlineUser);             var online = data.onlineUser;             $.each(online, function (index, element) {                 $('#onlineUser').append('<li class="active" id="' + element + '"><a href="#">' + element + '</a></li>');             })         }         //如果有新用户进来则添加在线成员，针对已在线成员         if (data.addUser) {             $('#onlineUser').append('<li class="active" id="' + data.userName + '"><a href="#">' + data.userName + '</a></li>');         }         //如果有用户离开则移除在线成员         if (data.removeUser) {             $('#' + data.userName + '').remove();         }         //消息大于15条时删除最上边的，防止撑破消息栏         if ($('#show').children('div').length>15){             $('#show').children('div:first').remove();         }     };     //连接断开时触发，清空绑定     socket.onclose = function (ev) {         $('#msg').unbind();         $('#show').text('连接已断开');     };     //连接时触发，创建用户名     socket.onopen = function (ev) {         var name = prompt('请输入昵称：');         if (name) {             socket.send(name);         } else {             socket.send('游客：' + Math.random() * 100000000000000000);         }     } </script> </html>

前端技术有点水，只能高出这么简陋的页面了。

即使这样也要搞个漂亮的首页😆：

index.html

<!DOCTYPE html> <html lang="zh-CN"> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>首页</title>      <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="jumbotron">     <div class="container text-center" >         <h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">基于WebSocket的在线聊天室</h2>         <br>         <div class="text-muted">与世界分享你的逼格</div>         <br>         <br>     </div>     <div class="container text-center">         <button class="btn btn-primary" id="enter">进入</button>     </div> </div> </body> <script src="js/jquery-3.4.1.js"></script> <script src="js/bootstrap.min.js"></script> <script>     $('#enter').click(function () {         location.href = 'chat.html';     }); </script> </html>

接下来是后端，首先添加依赖：

pom.xml

<dependency>     <groupId>javax.websocket</groupId>     <artifactId>javax.websocket-api</artifactId>     <version>1.1</version>     <scope>provided</scope> </dependency>  <dependency>     <groupId>com.alibaba</groupId>     <artifactId>fastjson</artifactId>     <version>1.2.59</version> </dependency>

然后是服务端主体：

后端实现

面向对象，对消息进行封装：

public class Message {     private String userName;//用户     private String msg;//消息主体     private boolean addUser;//用户加入     private boolean removeUser;//用户离开      //清空状态     public void clearMsg(){         msg = null;         addUser = false;         removeUser = false;     }      public String getUserName() {         return userName;     }      public void setUserName(String userName) {         this.userName = userName;     }      public String getMsg() {         return msg;     }      public void setMsg(String msg) {         this.msg = msg;     }      public boolean isAddUser() {         return addUser;     }      public void setAddUser(boolean addUser) {         this.addUser = addUser;     }      public boolean isRemoveUser() {         return removeUser;     }      public void setRemoveUser(boolean removeUser) {         this.removeUser = removeUser;     }      @Override     public String toString() {         return "Message{" +                 "userName='" + userName + '\'' +                 ", msg='" + msg + '\'' +                 ", addUser=" + addUser +                 ", removeUser=" + removeUser +                 '}';     } }

服务主体：

import com.alibaba.fastjson.JSON; import com.bilibili.pojo.Message;  import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;  //访问路径，类似http中的@WebServlet()注解 @ServerEndpoint("/chat") public class Chat {     //每一个连接都会创建一个Chat对象，所以创建一个静态Map来保存已连接用户     private static final Map<String, Chat> clientMap = new HashMap<>();      private boolean firstFlag = true;//是否第一次访问     private String name;     private Session session;//这里的Session和servlet中的Session不是同一个种     private Message message = new Message();      /**      * 客户端连接时执行的方法      * @param session 客户端session      * @throws IOException      */     @OnOpen     public void start(Session session) throws IOException {         this.session = session;         System.out.println("连接");     }      /**      * 客户端断开      */     @OnClose     public void end() {         //从连接对象中移除         clientMap.remove(name, this);         //向所有人发送一个有人离开的消息         message.clearMsg();         message.setUserName(name);         message.setMsg("离开了聊天室！");         message.setRemoveUser(true);         // 发送消息         sendMsg(JSON.toJSONString(message));         System.out.println("断开");     }      /**      * 服务端收到消息      * @param msg      */     @OnMessage     public void receive(String msg) {         if (firstFlag) {             //把第一次的消息作为用户名             name = msg;             //构造发送给所有人的消息             message.setMsg("加入了聊天室！");             message.setUserName(name);             message.setAddUser(true);             //获取当前在线用户             List<String> onlineUser = new ArrayList<>(clientMap.keySet());             clientMap.put(name, this);             try {                 //直接构造Json，给新连接的用户发送刷新在线用户的消息                 session.getBasicRemote().sendText("{\"onlineUser\":"+JSON.toJSONString(onlineUser)+"}");             } catch (IOException e) {                 e.printStackTrace();             }             // 给所有用户发送有人进入的消息             sendMsg(JSON.toJSONString(message));             firstFlag = false;         } else {             //不是第一次则直接发送消息             message.clearMsg();             message.setMsg(msg);             sendMsg(JSON.toJSONString(message));         }      }      // 当客户端通信出现错误时，激发该方法     @OnError     public void onError(Throwable t) throws Throwable {         System.out.println("WebSocket服务端错误 " + t);     }      //发送消息的方法     public void sendMsg(String msg) {         // 遍历服务器关联的所有客户端         Chat client = null;         for (String nickname : clientMap.keySet()) {             try {                 client = clientMap.get(nickname);                 synchronized (client) {                     // 发送消息                     client.session.getBasicRemote().sendText(msg);                 }             } catch (IOException e) {                 System.out.println("聊天错误，向客户端 " + client + " 发送消息出现错误。");                 clientMap.remove(name, client);                 try {                     client.session.close();                 } catch (IOException e1) {                 }                 Message newMessage = new Message();                 newMessage.setMsg("["+client.name+"]已经被断开了连接。");                 sendMsg(JSON.toJSONString(newMessage));             }         }     } }

这样就简单实现了一个聊天室。

效果图如下：