websocket技术，实现单聊和群聊

最新推荐文章于 2024-05-29 00:24:39 发布

YaYicho

最新推荐文章于 2024-05-29 00:24:39 发布

阅读量5.6k

点赞数

本文链接：https://blog.csdn.net/YaYicho/article/details/52330627

版权

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">基于我上次写的有关tomcat自带的websocket的简单搭建，搭建的链接：http://blog.csdn.net/yayicho/article/details/52080486</span>

搭建步骤我就不多说了下面是我写的单聊和群聊的案例

前台的代码

1、登陆页面，是为了实现多用户在线聊天，说白了就是为了测试

这步就省略了

在后台登陆后到echo.jsp的传值

loginServlet.java的关键代码

String username = request.getParameter("username");
		System.out.println(username);
		request.getSession().setAttribute("textusername", username);
		response.sendRedirect(request.getContextPath()+"/echo.jsp");

echo.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'echo.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type="text/javascript">
	var ws = null;
	var content="";
	var target = "ws://localhost:8080/WebSocket/echoSocket?username=${textusername}"
	function connect() {
	//websocket服务链接
		if ('WebSocket' in window) {
			ws = new WebSocket(target);
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(target);
		} else {
			alert('WebSocket is not supported by this browser.');
			return;
		}
		
		//此方法是用来接收后台传来的数据，前台页面和后台的数据都是json格式进行传值
		ws.onmessage = function(event) {
			console.info(event.data);
			eval("var result=" + event.data);
			console.info(result.usernames);
			if (result.usernames != undefined) {
				var html = "";
				$(result.usernames).each(function() {
				 html += "<li><input type='radio' value='"+this+"'name='username'>"+this+"</li>"; 
					$("#userList").html(html);
				});
			}
			
			if (result.welcome != undefined) {
				$("#content").append(result.welcome+"</br>");
			}
			
			if (result.exit != undefined) {
				$("#content").append(result.exit+"</br>");
			}
			if (result.content != undefined) {
				$("#content").append(result.content+"</br>");
			}
			
		};
	}
	function send() {
		var msg = $("#sendMsg").val();
		var ss = $("#userList :checked");
		console.info(ss.val());
		var obj=null;
		//单聊
		if(ss.val()!=undefined){
			obj = {
			//type是用来区分是单聊和群聊
				type:1,//1为单聊，2为群聊
				toUser:ss.val(),
				fromUser:"${textusername}",
				msg:msg
			};
		}else{
			//群聊
			obj = {
				type:2,//1为单聊，2为群聊
				msg:msg
			};
		}
		obj = JSON.stringify(obj);
		console.info(obj);
		ws.send(obj); 
		$("#sendMsg").val("");
	}
</script>
</head>

<body οnlοad="connect();">
	<div id="msg" style="width: 400px;height: 450px; border: solid 1px;">
		<p id="content">
		</p>
	</div>
	<div id="users"
		style="width: 150px;height: 530px;border: solid 1px; position:absolute;left: 412px;top:8px;">
		<p>
		<ul id="userList">
		</ul>
		</p>
	</div>
	<div id="send" style="width: 400px;height:80px;border: solid 1px;"
		align="right">
		<textarea style="width: 400px;height: 50px;" id="sendMsg"></textarea>
		<input type="button" value="发送消息" οnclick="send();">
	</div>
</body>
</html>

websocket配置（这一步很重要）SocketConfig.jsp

import java.util.Set;

import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;

public class SocketConfig implements ServerApplicationConfig{

	@Override
	public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> arg0) {
		
		System.out.println("socket:"+arg0);
		//返回值是必须的
		return arg0;
	}

	@Override
	public Set<ServerEndpointConfig> getEndpointConfigs(
			Set<Class<? extends Endpoint>> arg0) {
		return null;
	}

}

EchoSocket.java

import java.io.IOException;

import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import com.czy.test.Messge;
import com.czy.test.vo;
import com.google.gson.Gson;
import com.sun.xml.internal.bind.v2.runtime.output.Encoded;

@ServerEndpoint("/echoSocket")
public class EchoSocket {
	//是用来记录有多少websocket有多少session在运行
	private static List<Session> sessions = new ArrayList<Session>();
	//用来记录有多少个用户使用该websocket通道
	private static List<String> usernames = new ArrayList<String>();
	//用来记录用户名和该session进行绑定
	private static Map<String,Session> map = new HashMap<String, Session>();
	private String username;
	private Gson gson = new Gson();
	
	//打开链接
	@OnOpen
	public void open(Session session){
//		sessions.add(session);
		String str = session.getQueryString();//可以得到ws：//路径？后面的所有字符串
		username = str.split("=")[1];
		try {
			username = URLDecoder.decode(username, "utf-8");
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		usernames.add(username);
		map.put(username, session);
		Messge msg = new Messge();
		msg.setWelcome("欢迎"+username+":进入聊天室");
		msg.setUsernames(usernames);
		broadSend(sessions, msg.toJson());
	}
	
	//关闭连接
	@OnClose
	public void close(Session session){
		System.out.println(session.getId()+":已经关闭");
		String str = session.getQueryString();
		username = str.split("=")[1];
		try {
			username = URLDecoder.decode(username, "utf-8");
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		usernames.remove(username);
		sessions.remove(session);
		Messge msg = new Messge();
		msg.setExit(username+":离开聊天室");
		msg.setUsernames(usernames);
		broadSend(sessions, msg.toJson());
	}
	
	//客户端和服务器之间信息处理
	@OnMessage
	public void sendMessage(Session session,String msg){
		vo v = gson.fromJson(msg,vo.class);
		System.out.println(v.toString());
		if (v.getType()==2) {
			Messge message = new Messge();
			message.setUsernames(usernames);
			message.setContent(v.getMsg(),username);
			broadSend(sessions,message.toJson());
		}else {
			//单聊
			Messge message = new Messge();
			String toUsername = v.getToUser();
			Session to_Session = map.get(toUsername);
			Session from_Session = map.get(username);
			message.setContent(v.getMsg(),v.getFromUser(),toUsername);
			System.out.println(message.toJson());
			try {
				to_Session.getBasicRemote().sendText(message.toJson());
				from_Session.getBasicRemote().sendText(message.toJson());
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		
	}
	
	//实现群聊
	public void broadSend(List<Session> ss,String msg){
		for (Session session : ss) {
			try {
				session.getBasicRemote().sendText(msg);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
}

Messge.java是为了发送到客户端后信息格式好看，而封装的javabean

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import org.json.JSONArray;

import com.google.gson.Gson;

public class Messge {
	
	private List<String> usernames;
	private String content;
	private String username;
	private String welcome;
	private String exit;
	private Gson gson = new Gson();
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getWelcome() {
		return welcome;
	}
	public void setWelcome(String welcome) {
		this.welcome = welcome;
	}
	public String getExit() {
		return exit;
	}
	public void setExit(String exit) {
		this.exit = exit;
	}
	public List<String> getUsernames() {
		return usernames;
	}
	public void setUsernames(List<String> usernames) {
		this.usernames = usernames;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public void setContent(String msg,String username) {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		Date date = new Date();
		date.getTime();
		String dateStr = sdf.format(date);
		String content = dateStr+" "+username+"说："+"<br>"+msg;
		this.content = content;
	}
	
	public void setContent(String msg, String username, String toUsername) {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		Date date = new Date();
		date.getTime();
		String dateStr = sdf.format(date);
		String content = dateStr+" "+username+"对"+toUsername+"说："+"<br>"+msg;
		this.content = content;
	}
	
	public String toJson(){
		return gson.toJson(this);
	}
}

vo.java为了封装echo.jsp页面传来的json函数

public class vo {
	private int type;
	private String toUser;
	private String msg;
	private String fromUser;
	
	public String getFromUser() {
		return fromUser;
	}
	public void setFromUser(String fromUser) {
		this.fromUser = fromUser;
	}
	public int getType() {
		return type;
	}
	public void setType(int type) {
		this.type = type;
	}
	public String getToUser() {
		return toUser;
	}
	public void setToUser(String toUser) {
		this.toUser = toUser;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	@Override
	public String toString() {
		return "vo [type=" + type + ", toUser=" + toUser + ", msg=" + msg
				+ ", fromUser=" + fromUser + "]";
	}
}

YaYicho

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
websocket技术，实现单聊和群聊

基于我上次写的有关tomcat自带的websocket的简单搭建，搭建的链接：http://blog.csdn.net/yayicho/article/details/52080486搭建步骤我就不多说了下面是我写的单聊和群聊的案例前台的代码1、登陆页面，是为了实现多用户在线聊天，说白了就是为了测试这步就省略了在后台登陆后到echo.jsp的传值loginServlet.j
复制链接

扫一扫