websocket实现群聊

最新推荐文章于 2024-08-19 16:01:20 发布

良辰美景好时光

最新推荐文章于 2024-08-19 16:01:20 发布

阅读量910

点赞数 1

文章标签： java websocket

本文链接：https://blog.csdn.net/qq_45740503/article/details/117200414

版权

websocket实现群聊

一、Server层
二、主页
- 模板
- index.html
三、work.js：
- work111.js
- work123.js
四、实现效果图：
五、网页获取该电脑的ip地址：
- getip.html
- 效果图：

一、Server层

代码层次图

在这里插入图片描述

注意：端口号要一致9090

DL.java

public class DL {
    /**
     * 私有的构造方法，确保了单例模式的唯一性
     * 构造方法，只会执行一次
     */
    private DL(){
        this.ol=new HashMap<String,Vector<Session>>();//群号，用户
        this.ol.put("123", new Vector<Session>());
    }

    /**
     * 单例模式的实例对象
     */
    private static DL d;

    /**
     * synchronized同步锁
     * 创造唯一的实例
     */
    public static synchronized DL getdl(){
        if (d==null){
            d=new DL();
        }
        return d;
    }

    private Map<String,Vector<Session>> ol;//null

    /**
     * 订阅模式的核心代码
     * sendPing
     * sendPang
     * @param qid 群号
     * @param s 用户
     * @return -1：没有该群；
     *          1：添加用户成功；
     *          0：添加用户失败；
     */
    public synchronized int jiaru(String qid,Session s){
        Vector<Session> v1=this.ol.get(qid);
        if (v1==null){
            return -1;
        }else {
            Boolean a=v1.add(s);
            if (a){

                for (int i=0;i<v1.size();i++){
                    //通过循环获取所有用户
                    Session s1=v1.get(i);

                    try {
                        //同步传文本
                        //使用websocket从服务器端向客户端传递消息的代码
                        //****
                        s1.getBasicRemote().sendText("user");
                    } catch (Exception e) {//比如断网，关闭客户端
                        e.printStackTrace();
                    }

                }

                return 1;
            }else {
                return 0;
            }
        }
    }

    public synchronized void sendall(String qid,String msg){
        Vector<Session> v2=this.ol.get(qid);
        for (int i = 0; i < v2.size(); i++) {
            Session s2=v2.get(i);
            try {
                s2.getBasicRemote().sendText("user:"+msg);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

    }

}

WSServer.java

@ServerEndpoint("/wohenshuai")
public class WSServer {
    @OnOpen
    public void abc(Session s){
        System.out.println("新得连接");
        DL d=DL.getdl();
        d.jiaru("123", s);
    }

    @OnMessage
    public void bcd(Session s,String msg){//从前端传递来的信息
        DL d=DL.getdl();
        d.sendall("123", msg);
    }

    @OnError
    public void cde(Throwable e){

    }

    @OnClose
    public void def(){

    }

}

HelloServlet.java

@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
    private String message;

    public void init() {
        message = "Hello World!";
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html");

        // Hello
        PrintWriter out = response.getWriter();
        out.println("<html><body>");
        out.println("<h1>" + message + "</h1>");
        out.println("</body></html>");
    }

    public void destroy() {
    }
}

二、主页

模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			/* 双引号里写服务器路径 */
			var w;
			function init(){
				w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
				w.onopen=function(){
					
				};
				w.onmessage=function(){
					
				};
				w.onerror=function(){
					
				};
				w.onclose=function(){
					
				};
				document.getElementById("d1").innerText="aaaa";
			}
		</script>
	</head>
	<body onload="init()">
		<div id="d1"></div>
	</body>
</html>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			/* 双引号里写服务器路径 */
			var w;
			function init(){
				w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
				w.onopen=function(){
					//alert("已连接");
				};
				/* e的完整的是event单词 */
				w.onmessage=function(e){
					/* 服务器端传向前端的内容 */
					//alert(e.data);
					var s1=e.data;
					/* indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 */
					if(s1.indexOf(":")>=0){
						document.getElementById("dleft").innerHTML+=e.data+"<br/>";
					}else{
						document.getElementById("dright").innerHTML+=e.data+"<br/>";
					}
					/* +=是往后追加 */
					//document.getElementById("dright").innerHTML+=e.data+"<br/>";
					
				};
				w.onerror=function(){
					
				};
				w.onclose=function(){
					
				};
			}
			/* 获取文本框中的值 */
			function abcd(){
				var a=document.getElementById("t1").value;
				w.send(a);
				document.getElementById("t1").value="";
			}
		</script>
	</head>
	<body onload="init()">
		<div style="width: 70%;margin: 0 auto;height: 800px;">
			
			<div style="float: left;width: 79%;height: 800px;">
				<div id="dleft" style="margin-top: 5px;width: 100%;height: 700px;overflow: auto;border: solid 1px;">
					
				</div>
				
				<div style="margin-top: 5px;width: 100%;height: 70px;">
					<div style="float: left;width: 80%;height: 70px;">
						<input id="t1" type="text" style="width: 100%;margin-top: 30px;" />
					</div>
					<div style="float: right;width: 19%;height: 170px;">
						<button style="margin-top: 30px;margin-left: 15px;" onclick="abcd()">发送</button>
					</div>
				</div>
				
			</div>
			
			<div id="dright" style="float: right;width: 19%;height: 800px;border: solid 1px;">
				
			</div>
			
		</div>
	</body>
</html>

三、work.js：

work111.js

var list=[];
var j={
	id:0,
	p1:""
};
var w;
onconnect=function(e){
	/* 弹出对话窗,不输出aaa,是因为多线程的原因*/
	//alert("aaa");
	/* 控制台输出 */
	//console.log("aaaaaa");
	var port=e.ports[0];
	
	/* 监听器 */
	port.addEventListener('message',function(e){
		
		/* 前端传的是不是id,如果id不为空 ,连接*/
		if(e.data.id){
			/* 克隆一个对象 */
			var j2=Object.create(j,{
				id:{
					writeable:true,
					value:j1.id
				},
				p1:{
					writeable:true,
					value:port
				}
			});
			
			var b1=true;
			/* 循环遍历 */
			for (var i = 0; i < list.length; i++) {
				var j1=list[i];
				/* 如果id等于传过来的id ,例如刷新页面*/
				if(j1.id==e.data.id){
					b1=false;
					
					
					/* 替换原来的j */
					/* i:下标
					   1：第一个
					  j2：替换的值
					 */
					list.splice(i,1,j2);
					break;
				}
			}
			
			if(b1){
				list.push(j2);
			}
			
			
		}else{
			//业务逻辑、数据交互
			
			
		}
	});
	
	
	port.start();
};

function lianjie(){
	w=new WebSocket("ws://localhost:9090/qunliao/wohenshuai");
	w.onopen=function{
		//alert("已连接");
	};
	w.onmessage-function(e){
		//alert("e.data");
		var s1=e.data;
		if(s1.indexOf(":")>=0){
			document.getElementById("dleft").innerHTML+=e.data+<br/>;
		}else{
			document.getElementById("dright").innerHTML+=e.data+<br/>;
		}
	};
	w.onerror=function(){
		
	};
	w.onclose=function(){
		
	};
}

lianjie();

work123.js

var list=[];
var j={
	id:0,
	p1:""
}

onconnect=function(e){
	/* 弹出对话窗,不输出aaa,是因为多线程的原因*/
	//alert("aaa");
	/* 控制台输出 */
	//console.log("aaaaaa");
	var port=e.ports[0];
	
	/* 监听器 */
	port.addEventListener('message',function(e){
		
		/* 如果id不为空 */
		if(e.data.id){
			/* 循环遍历 */
			for (var i = 0; i < list.length; i++) {
				var j1=list[i];
				/* 如果id等于传过来的id ,例如刷新页面*/
				if(j1.id==e.data.id){
					
					/* 克隆一个对象 */
					var j2=Object.create(j,{
						id:{
							writeable:true,
							value:j1.id
						},
						p1:{
							writeable:true,
							value:port
						}
					});
					
					/* 替换原来的j */
					/* i:下标
					   1：第一个
					  j2：替换的值
					 */
					list.splice(i,1,j2);
					break;
				}
			}
		}else{
			
		}
	});
	
	
	port.start();
};

四、实现效果图：

在这里插入图片描述

五、网页获取该电脑的ip地址：

getip.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
		<script type="text/javascript">
		document.write(returnCitySN["cip"]+','+returnCitySN["cname"]); 
		</script>
		
	</head>
	<body>
	</body>
</html>

效果图：

在这里插入图片描述

良辰美景好时光

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
websocket实现群聊

websocket实现群聊一、Server层代码层次图DL.javaWSServer.javaHelloServlet.java二、主页index.html三、实现效果图：一、Server层代码层次图注意：端口号要一致9090DL.javapublic class DL { /** * 私有的构造方法，确保了单例模式的唯一性 * 构造方法，只会执行一次 */ private DL(){ this.ol=new HashMap<
复制链接

扫一扫