websocket实现聊天室（前后端代码都有，大家可以借鉴一下）

最新推荐文章于 2022-12-26 17:20:06 发布

海德薇快跑

最新推荐文章于 2022-12-26 17:20:06 发布

阅读量520

点赞数

本文链接：https://blog.csdn.net/weixin_43809055/article/details/107014614

版权

最近挺累的，直接上代码吧：

目录结构：
在这里插入图片描述
代码：

package com.per.mybootall.webSocket;

import com.per.mybootall.vo.Message;
import com.per.mybootall.vo.WebSocketMessage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;

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.util.ArrayList;
import java.util.List;

import static com.sun.deploy.si.SingleInstanceManager.broadcast;


@ServerEndpoint("/echo")
@Component
public class EchoSocket {
//    @Autowired
//    private SimpMessagingTemplate template;

private static String username;
private static List<String> names=new ArrayList<String>();
private static List<Session> sessions=new ArrayList<Session>();
    @OnOpen
    public void open(Session session) {
        //一个session代表一个即时通信会话
        String qrName=session.getQueryString();
        System.out.println("qrName:"+qrName);
       username=qrName.split("=")[1];
       names.add(username);
String msg="<span style=\"color: #CF1900;\">欢迎"+username+"用户进入</span><br/>";
sessions.add(session);
        Message message=new Message();
        message.setMsg(msg);
        message.setList(names);
        for(Session session1:sessions){
            try {
                session1.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    //broadcast(message.toJSON());
    }

    @OnClose
    public void close(Session session){
        String qrname=session.getQueryString();
        username=qrname.split("=")[1];
        String msg="<span style=\"color: #CF1900;\">用户"+username+"已经退出登陆</span>";
        System.out.println("关闭"+session.getId()+"管道");
        sessions.remove(session);
        System.out.println("sessions  remove  session  success");
    for(Session session1:sessions){
        try {
            session1.getBasicRemote().sendText(msg);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    }

    @OnMessage
    public void message(Session session,String msg){
        System.out.println("客户端:"+msg);
        try {
           // session.getBasicRemote().sendText(msg);
            WebSocketMessage webSocketMessage=new WebSocketMessage();
            webSocketMessage.setMessage(msg);
            //  广播出去
            for(Session session1:sessions){
                if(session==session1){
                    String msgs="<span style=\"color: chartreuse;\">"+msg+"</span>";
                    session1.getBasicRemote().sendText(msgs);
                }else{
                    String msgs="名字后面改哈："+msg;
                    session1.getBasicRemote().sendText(msgs);
                }

            }


        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

q前端：
在这里插入图片描述
：

webSocket Test

	<script src="../js/stomp.js"></script>
	<script src="../js/jquery-3.1.1.js"></script>
	<script src="../lay/modules/layer.js"></script>
</head>
<body>

	<input id="msg" /><button onclick="send()">发送</button>
	<!-- <button onclick="closethelayer()">关闭</button> -->
	<div id="dv"></div>
</body>
<script type="text/javascript">
	var ws;//一个ws对象就是一个通信管道

	var target="ws://localhost:8080/echo?username="+get_uuid();

	window.onload=function(){
		console.log("in open....");
		if('WebSocket' in window){
			ws=new WebSocket(target);
		}else if('MozWebSocket' in window){
			ws=new MozWebSocket(target);
		}else{
			alert("您目前的浏览器不支持该即时通讯");   
			return ;
		}
		ws.onmessage=function(event){				
		var dv=document.getElementById("dv");				
			dv.innerHTML+=event.data+"</br>";
		};
	}	
	
	function send(){
		var msg=document.getElementById("msg").value;
		ws.send(msg);
		document.getElementById("msg").value=""; 
	}
	//生成uuid
	function get_uuid(){
	    var s = []
	    var hexDigits = "0123456789abcdef"
	    for (var i = 0; i < 36; i++) {
	        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
	    }
	    s[14] = "4"
	    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
	    s[8] = s[13] = s[18] = s[23] = "-"
	
	    var uuid = s.join("")
	    return uuid
	}
	// function closethelayer(){
	// 	console.log("111");
	// 	layer.close();
	// 	console.log("222");
	// 	layer.closeAll();
	// 	console.log("333");
	// }
</script>

z上面这个html复制不上去，大家自行补全，只是个html和title标签，大家应该都没问题。

c成果展示：
在这里插入图片描述，websocket生命周期三个阶段，open：打开管道。 message：消息传输。 close：关闭管道， websocket的session就是管道对象。代码可以直接拿去用，不明白的可以留言问我，顶不住了，太困了

海德薇快跑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
websocket实现聊天室（前后端代码都有，大家可以借鉴一下）

最近挺累的，直接上代码吧：目录结构：代码：package com.per.mybootall.webSocket;import com.per.mybootall.vo.Message;import com.per.mybootall.vo.WebSocketMessage;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.messaging.simp.SimpM
复制链接

扫一扫