java SpringBoot+webSocket聊天小程序（复制代码即可用）

本文链接：https://blog.csdn.net/weixin_39592397/article/details/83414335

1。后端代码

package test.conntroller.socket;

import java.util.HashMap;
import java.util.HashSet;
import java.util.Random;
import java.util.Set;
import java.util.UUID;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.annotation.PostConstruct;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;

@ServerEndpoint(value="/webSocket/{nickname}") //webSocket连接点映射
@Component
public class MyWebSocket {
   @Autowired
   private JdbcTemplate jdbc;

   private static JdbcTemplate jdbcs;

   //存储每个客户端对应的MyWebSocket对象
   private static CopyOnWriteArraySet<MyWebSocket>webSocketSets = new CopyOnWriteArraySet<MyWebSocket>();

   private Session session; //当前会话的session
   private static String nickname;

   //解决spring注入不上问题
   @PostConstruct
   public void init(){
       jdbcs=jdbc;
   }
   /**
       * 成功建立连接的方法
       * */
   @OnOpen
   public void onOpen(Session session,@PathParam("nickname")String nickname){
       createUser(nickname);
       this.nickname=nickname;
       this.session=session;
       webSocketSet.add(this);
       System.err.println(this);
       System.out.println(session);
       //this.session.getAsyncRemote().sendText(nickname+"上线了"+"当前在线人数为"+webSocketSet.size()+"人");
       for (MyWebSocket myWebSocket : webSocketSet) {
           if(myWebSocket==this){
               session.getAsyncRemote().sendText(nickname+"连接成功"+"当前在线人数为"+webSocketSet.size()+"人");
           }else
               session.getAsyncRemote().sendText(nickname+"上线了"+"当前在线人数为"+webSocketSet.size()+"人");
       }
   }

   private void createUser(String nickname2) {
       // TODO Auto-generated method stub
       String uuid = UUID.randomUUID().toString();
       this.jdbcs.update("insert into demo(id,name)values(?,?)",new Object[]{uuid,nickname2});
   }

   /**
   * 连接关闭的方法
   * *
   */
   @OnClose
   public void onClose(Session session){
       webSocketSet.remove(this);
   }

   /**
   * 接收客户端消息后调用的方法
   * *
   */

   @OnMessage
   public void onMessage(String message,Session session,@PathParam("nickname")String nickname){
       broadcast(message,nickname);
   }

   private void broadcast(String message,String nickname) {
       // TODO Auto-generated method stub
       for (MyWebSocket myWebSocket : webSocketSet) {
           if(myWebSocket==this){
               session.getAsyncRemote().sendText("<span style=\"color:red;float:right\">"+message+":"+nickname+"</span>");
           }else{
               session.getAsyncRemote().sendText(nickname+":"+message);
           }
       }
   }

   /**
   *发生错误的方法
   * *
   */
   @OnError
   public void onError(Session session,Throwable error){
       System.out.println("发生错误");
       error.printStackTrace();
   }
}

2.前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<style>
#message{
       margin-top:20px;
       border:1px solid gray;
       padding:20px;
   }
input{
   text-align:center;
   }
</style>
</head>
<body>

   <button οnclick="conectWebSocket()">连接WebSocket</button>
   <button οnclick="closeWebSocket()">断开连接</button>
<br></br>
消息：<input type="text" id="text" />
<button οnclick="send()">发送消息</button>
<div id="message" style="width: 500px;height: 500px;overflow-y:scroll">

   </div>
<script type="text/javascript">

   //连接对象
   var websocket = null;
   var nickname = null;
   function conectWebSocket(){
       nickname = document.getElementById("nickname").value;
       if(nickname == ''){
           alert("请输入昵称");
           return;
       }
       //判断当前的浏览器是否支持websocket.
       if("WebSocket" in window){
           websocket = new WebSocket("ws://127.0.0.1:8081/webSocket/"+nickname);
       }else{
           alert("不支持");
           return false;
       }

       //连接成功的方法.
       websocket.onopen = function(event){
           setMessgeHtml("连接成功");
       }

       //连接关闭.
       websocket.onclose = function(event){

           setMessgeHtml("连接关闭");
       }

       //连接异常.
       websocket.onerror = function(event){
           setMessgeHtml("连接异常");
       }


       websocket.onmessage = function(event){
           setMessgeHtml(event.data);
       }

   }

   function setMessgeHtml(msg){
       var message = document.getElementById("message");
       message.innerHTML += msg+"<br/>";
   }

   /**
       发送消息.
   */
   function send(){

       var message = document.getElementById("text").value;
       document.getElementById("text").value='';
       websocket.send(message);//将json对象转换为json字符串.
   }

</script>
</body>
</html>