devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JAVA利用websocket实现多人聊天室、私信（附源码）_java实现聊天室框架图 有房间概念

作者：Cpp五条 | 2024-03-27 16:40:06

赞

踩

java实现聊天室框架图 有房间概念

声明：此文为原创，转载请声明出处！

小编曾在毕业设计中用到了聊天室这个功能，现在稍作整理分享一下，希望能对大家有所帮助，有不足之处请指出

在学习websocket前，首先得知道它的一些基本操作，可参考此链接：

http://www.runoob.com/html/html5-websocket.html

为了方便演示，小编搭建了一个springmvc框架：


图1.1 聊天室首页

为了方便源码分享，小编舍弃了数据库部分，因此没有做创建房间的功能，直接写死了两个房间。


   图1.2 聊天室房间页


图1.3项目结构图

下面来看下代码：

如代码片段1 ，首先通过http://localhost:8080/Chatroom/home/list.do请求，访问index.jsp（图1.1 聊天室首页）

代码片段1：

  1. package com.controller;
  2.  
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.ModelMap;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.bind.annotation.SessionAttributes;
  7.  
  8. @Controller
  9. @RequestMapping("/home")
  10. @SessionAttributes("uname")
  11. public class ViewController {
  12. 	
  13. 	@RequestMapping("/list")
  14. 	public String cc(ModelMap model){
  15. 		return "index";
  16. 	  }
  17. 	
  18. 	@RequestMapping("/room")
  19. 	public String h(ModelMap model,String uname,String roomid){
  20. 		model.put("uname",uname);
  21. 		model.put("roomid", roomid);
  22. 		return "room";
  23. 	}
  24. }

代码片段2：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
  8. <title>Insert title here</title>
  9. </head>
  10. <script type="text/javascript">
  11. 	$(function() {
  12. 		$("span").click(function(){
  13. 			var uname = $("input").val();
  14. 			if(uname == ""){
  15. 				alert("请先输入用户名");
  16. 			}else {
  17. 				var roomid = $(this).html()
  18. 				location.href="/Chatroom/home/room.do?uname="+uname+"&roomid="+roomid;
  19. 			}
  20. 		})
  21. 	})
  22. </script>
  23. <style>
  24. 	span:HOVER{
  25. 		color: red;
  26. 	}
  27. 	span{
  28. 		cursor:pointer;
  29. 	}
  30. </style>
  31. <body>
  32. 	用户名:<input type="text">   /*注：请先输入用户名，且保证用户名唯一，再点击下面的房间加入房间
  33. 	<h1><span>room1</span></h1>
  34. 	<h1><span>room2</span></h1>
  35. </body>
  36. </html>

代码片段3和4代码量较多，中间有详细的注解，不再做更多的解释

代码片段3：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <head>
  7. <%
  8. String path = request.getContextPath();
  9. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  10. %>
  11. <base href="<%=basePath%>" />
  12. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  13. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  14. <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  15. <link rel="stylesheet" type="text/css" href="css/chat.css" />
  16. <title>聊天室</title>
  17. </head>
  18. <script type="text/javascript">
  19. $(function(){
  20. 	var roomid=$(".roomid").html();//房间名
  21. 	var nickname = $(".uname").html();//自己的昵称
  22. 	var flag = "join";
  23. 	var info = flag + "|" +roomid + "|" +nickname;
  24. 	//建立一条与服务器之间的连接
  25. 	var socket = new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket/"+info);
  26. 	var text = "";
  27. 	var welcome = JSON.stringify({			//加入房间时的欢迎消息
  28. 						nickname:nickname,    //用户名
  29. 						content:text,		//消息内容
  30. 						target:roomid,		//推送到目标房间
  31. 						flag:"chatroom"});	//推送标识
  32. 						
  33. 	var exitroom = JSON.stringify({		//退出房间
  34. 		nickname:nickname,
  35. 		flag:"exitroom",
  36. 		roomid:roomid
  37. 	})
  38. 	//接收服务器的消息
  39. 	socket.onmessage=function(ev){
  40. 		var obj = eval(   '('+ev.data+')' );
  41. 		addMessage(obj)
  42. 	};
  43. 	//当服务端执行onopen后触发此方法
  44. 	socket.onopen = function(){
  45. 		socket.send(welcome); 
  46. 	};
  47. 	//发送按钮被点击时
  48. 	$(".ensure button").click(function(){
  49. 	    ensure();
  50.     });
  51. 	
  52. 	$("body").keyup(function (event) {//监听回车键
  53. 		if (event.keyCode == "13") {//keyCode=13是回车键
  54. 			$(".ensure button").trigger("click");
  55. 		}
  56. 	});
  57. 	
  58. 	function ensure(){
  59. 		//获取输入框的内容
  60. 	    var txt = $(".center-input").val()
  61. 		if(txt==''){
  62. 			  alert("不能发送空内容")
  63. 		}else{
  64. 	    	//构建一个标准格式的JSON对象
  65. 	    	var obj = JSON.stringify({
  66. 		    		nickname:nickname,    //用户名
  67. 					content:txt,		//消息内容
  68. 					flag:'chatroom',			//标识--chatroom代表是聊天室的消息
  69. 					target:roomid	//消息推送的目的地
  70. 				});	
  71. 	        // 向服务器发送消息
  72. 	        socket.send(obj);
  73. 	     	// 清空消息输入框
  74. 	        $(".center-input").val("")
  75. 	        // 消息输入框获取焦点
  76. 	        $(".center-input").focus(); 
  77. 		}
  78. 	}
  79. 	
  80. 	function addMessage(msg){
  81. 		if(msg.isSelf&&msg.content==""){ //该消息是自己发送的，并且内容为空
  82. 			$(".center-info").append("<div class='welcome'>欢迎你加入群聊</div>");
  83. 			refreshMember(msg.uname);  //刷新成员 
  84. 		}
  85. 		if(!msg.isSelf&&msg.content==""){//该消息是别人发送的，并且内容为空
  86. 			$(".center-info").append("<div class='welcome'>欢迎"+msg.nickname+"加入群聊</div>");
  87. 			//刷新成员列表
  88. 			refreshMember(msg.uname)
  89. 		} 
  90. 		if(!msg.content==""){			//内容不为空时 
  91. 			var align;
  92. 			if(msg.isSelf){
  93. 				align = "right";
  94. 			}else{
  95. 				align = "left";
  96. 			}
  97. 			$(".center-info").append(
  98. 					"<div class='basicInfo' style=float:"+align+">"+
  99. 					"<div class='basicInfo-left' style=float:"+align+">"+
  100. 						"<img src='img/touxiang.jpg'>"+
  101. 					"</div>"+
  102. 					"<div class='basicInfo-right' style=float:"+align+">"+
  103. 						"<div class='username' style=text-align:"+align+">"+
  104. 							"<span>"+msg.nickname+"</span> "+
  105. 							"<span>"+msg.date+"</span>"+
  106. 						"</div>"+
  107. 						"<div class='context'>"+
  108. 							"<span>"+
  109. 								msg.content+
  110. 							"</span>"+
  111. 						"</div>"+
  112. 					"</div>"+
  113. 				"</div>"
  114. 			); 
  115. 		}
  116. 		if(msg.flag == "exitroom"){		//退出房间
  117. 			$(".center-info").append("<div class='welcome'>"+msg.message+"</div>");
  118. 			//刷新成员列表
  119. 			refreshMember(msg.uname)
  120. 		}
  121. 		$(".center-info").scrollTop(999999); //让滚动条始终保持在最下 
  122. 	}
  123. 	
  124. 	$(".exitroom").click(function(){			//退出房间
  125. 		socket.send(exitroom); //向服务器发送退出房间的信号
  126. 		location.href="/Chatroom/home/list.do"; //跳转到前一个页面
  127. 	})
  128. 	
  129. 	function refreshMember(data){
  130. 		$(".member").html("");
  131. 		for(var i=0;i<data.length;i++){
  132. 			$(".member").append(
  133. 				"<div class='memberInfo'>"+
  134. 					"<div class='userpic'>"+
  135. 						"<img src='img/touxiang.jpg'>"+
  136. 					"</div>"+
  137. 					"<span class='username'>"+data[i]+"</span>"+
  138. 				"</div>"
  139. 			)
  140. 		}
  141. 	}
  142. }) 
  143. </script>
  144.  
  145. <body>
  146. 	<div class="body-left">
  147. 		<div class="left-info">
  148. 			<div class="exitroom">
  149. 				<--退出房间
  150. 			</div>
  151. 			<div class="roomname">
  152. 				欢迎来到：<h1 style="display: inline-block;" class="roomid">${roomid }</h1>
  153. 			</div>
  154. 			<div class="member">
  155. 				<c:forEach items="${requestScope.memberlist }" var="member">
  156. 					<div class="memberInfo">
  157. 						<div class="userpic">
  158. 							<img src="img/touxiang.jpg">
  159. 						</div>
  160. 						<span class="username">${member.username }</span>
  161. 						<span style = "display:none">${member.userid }</span>
  162. 					</div>
  163. 				</c:forEach>
  164. 			</div>
  165. 		</div>
  166. 	</div>
  167. 	<div class="body-center">
  168. 		<div class="center-info">
  169.  
  170. 		</div>
  171. 		<textarea class="center-input"></textarea>
  172. 		<div class="ensure">
  173. 			<button>发送</button>
  174. 		</div>
  175. 	</div>
  176. 	
  177. 	<div class="body-right">
  178. 	</div>
  179. 	
  180. 	<span class="uname" style="display:none">${sessionScope.uname }</span>
  181. 	
  182. </body>
  183.  
  184. </html>

代码片段4：

  1. package com.controller;
  2.  
  3. import java.io.IOException;
  4. import java.text.SimpleDateFormat;
  5. import java.util.ArrayList;
  6. import java.util.Date;
  7. import java.util.List;
  8. import java.util.concurrent.ConcurrentHashMap;
  9.  
  10. import javax.websocket.OnClose;
  11. import javax.websocket.OnError;
  12. import javax.websocket.OnMessage;
  13. import javax.websocket.OnOpen;
  14. import javax.websocket.Session;
  15. import javax.websocket.server.PathParam;
  16. import javax.websocket.server.ServerEndpoint;
  17.  
  18.  
  19. import net.sf.json.JSONObject;
  20.  
  21.  
  22. @ServerEndpoint("/websocket/{info}")
  23. public class WebSocketService {
  24. 	private static SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");//创建时间格式对象
  25. 	//concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketService对象。
  26. 	//创建一个房间的集合，用来存放房间
  27. 	private static ConcurrentHashMap<String,ConcurrentHashMap<String, WebSocketService>> roomList = new  ConcurrentHashMap<String,ConcurrentHashMap<String, WebSocketService>>();
  28. 	//与某个客户端的连接会话，需要通过它来给客户端发送数据
  29. 	private Session session;
  30.     //重新加入房间的标示；
  31.     private int rejoin = 0;
  32.     static {
  33.     	roomList.put("room1", new ConcurrentHashMap<String, WebSocketService>());
  34.     	roomList.put("room2", new ConcurrentHashMap<String, WebSocketService>());
  35.     }
  36. 	/**
  37. 	 * 用户接入
  38. 	 * @param session 
  39. 	 */
  40. 	@OnOpen
  41. 	public void onOpen(@PathParam(value = "info") String param,Session session){
  42. 		this.session = session;
  43. 		String flag = param.split("[|]")[0]; 		//标识
  44. 		String member = param.split("[|]")[1];		//成员名
  45. 		if(flag.equals("join")){
  46. 			String user = param.split("[|]")[2];
  47. 			joinRoom(member,user);
  48. 			
  49. 		}
  50. 	}
  51. 	
  52. 	//加入房间
  53. 	public void joinRoom(String member,String user){
  54. 		ConcurrentHashMap<String, WebSocketService> r =  roomList.get(member);
  55. 		if(r.get(user) != null){		//该用户有没有出
  56. 			this.rejoin = 1;
  57. 		}
  58. 		r.put(user, this);//将此用户加入房间中
  59. 	}
  60. 	public void sendMessage(String message) throws IOException {
  61.         this.session.getBasicRemote().sendText(message);
  62.     }
  63. 	/**
  64. 	 * 接收到来自用户的消息
  65. 	 * @param message
  66. 	 * @param session
  67. 	 * @throws IOException 
  68. 	 */
  69. 	@OnMessage
  70. 	public void onMessage(String message,Session session) throws IOException{
  71. 		//把用户发来的消息解析为JSON对象
  72. 		JSONObject obj = JSONObject.fromObject(message);
  73. 		if(obj.get("flag").toString().equals("exitroom")){		//退出房间操作
  74. 			String roomid = obj.get("roomid").toString();
  75. 			//将用户从聊天室中移除
  76. 			int f2 = 1;
  77. 			roomList.get(roomid).remove(obj.get("nickname").toString());//将用户直接移除
  78. 			if(roomList.get(roomid).size() == 0){//判断房间该房间是否还有用户，如果没有，则将此房间也移除
  79. 				f2 = 2;
  80. 			}
  81. 			if(f2 == 1){		//证明该房间还有其它成员，则通知其它成员更新列表
  82. 				obj.put("flag","exitroom");
  83. 				String m = obj.get("nickname").toString()+" 退出了房间";
  84. 				obj.put("message", m);
  85. 				ConcurrentHashMap<String, WebSocketService> r =roomList.get(roomid);
  86. 				List<String> uname = new ArrayList<String>();
  87. 				for(String u:r.keySet()){
  88. 					uname.add(u);
  89. 				}
  90. 				obj.put("uname", uname.toArray());
  91. 				for(String i:r.keySet()){  //遍历该房间
  92. 					r.get(i).sendMessage(obj.toString());//调用方法 将消息推送
  93. 				}
  94. 			}
  95. 		}else if(obj.get("flag").toString().equals("chatroom")){		//聊天室的消息 加入房间/发送消息
  96. 			//向JSON对象中添加发送时间
  97. 			obj.put("date", df.format(new Date()));
  98. 			//获取客户端发送的数据中的内容---房间号 用于区别该消息是来自于哪个房间
  99. 			String roomid = obj.get("target").toString();
  100. 			//获取客户端发送的数据中的内容---用户
  101. 			String username = obj.get("nickname").toString();
  102. 			//从房间列表中定位到该房间
  103. 			ConcurrentHashMap<String, WebSocketService> r =roomList.get(roomid);
  104. 			List<String> uname = new ArrayList<String>();
  105. 			for(String u:r.keySet()){
  106. 				uname.add(u);
  107. 			}
  108. 			obj.put("uname", uname.toArray());
  109. 			if(r.get(username).rejoin == 0){			//证明不是退出重连
  110. 				for(String i:r.keySet()){  //遍历该房间
  111. 					obj.put("isSelf", username.equals(i));//设置消息是否为自己的
  112. 					r.get(i).sendMessage(obj.toString());//调用方法 将消息推送
  113. 				}
  114. 			}else{
  115. 				obj.put("isSelf", true);
  116. 				r.get(username).sendMessage(obj.toString());
  117. 			}
  118. 			r.get(username).rejoin = 0;
  119. 		}
  120. 		
  121. 	}
  122. 	
  123. 	/**
  124. 	 * 用户断开
  125. 	 * @param session
  126. 	 */
  127. 	@OnClose
  128. 	public void onClose(Session session){
  129.  
  130. 	}
  131. 	
  132. 	/**
  133. 	 * 用户连接异常
  134. 	 * @param t
  135. 	 */
  136. 	@OnError
  137. 	public void onError(Throwable t){
  138. 		
  139. 	}
  140. }

在代码片段4中，可能存在比较难理解的地方，小编通过自己的理解来画图，希望能够帮到大家。


图1.3 websocket执行流程


图1.4 用户加入房间


图1.5消息推送

私信、即时通信都可以利用websocket完成，原理跟聊天室是完全一样的。在此不再做更多的阐述~

小编的编辑经验尚浅，所以此文比较粗糙。不足之处请各位看官指出，不胜感激。

到此，聊天室的功能就演示完了，另附上项目源码

链接：https://pan.baidu.com/s/1NUgzDfU8IEhVHHn8BhddwA 密码：yk7o

环境：eclispe+jdk1.8+tomcat8.

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号