WebSocket实现多人在线聊天功能

WebSocket是现在最流行的实现多人在线聊或者私聊的技术，它可以实现客户端到客户端的通信，和以往的TCP和UDP不一样，它俩是客户端到服务端的通信，而且服务端不能直接给客户端发送消息，但是WebSocket不仅可以客户端和客户端之间通信，服务端也可以直接发送消息给客户端。
下面实现的一个多人的在线聊天室，前台聊天框是在网上找的模板，该聊天室具有的功能如下

1. 当一个客户端进入之后，其他客户端会看到系统消息提示（某某某进入了聊天室）
2. 客户端发送消息，每个客户端都可以收到消息
3. 当一个客户端退出或者关闭聊天室网页时，其他客户端会看到系统消息提示（某某某退出了聊天室）

下面是代码，这里说明一点
里面的注解像@ServerEndpoint，@OnMessage，@OnClose，@OnOpen等都是javax支持的，还有下面的Session不是HTTP的Session,都是属于javax.websocket的。

项目是一个简单的Web项目，什么框架也没用，只是复制了一个html页面到WebContent文件夹。

因为web.xml文件的配置，所以把项目部署到Tomcat上面直接运行，输入路径localhost:8080/chatroom即可，默认跳转到index.html页面，也就是聊天框的页面。

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>

至于html页面也不用我给你们了吧，自己可以在网上面找聊天模板，太多了。
直接讲js吧？要模板的到最下面给你们链接去下载好啦，记得好评兄弟盟，如果帮到你们的话就给宝宝扣个1可否？

js代码

<script type="text/javascript">
	//webSocket实现聊天，客户端需要做的事情，总结起来，其实就是一下几件
	//1，获取连接，new WebSocket()
	//服务端地址和请求类型
	var wsUrl="ws://localhost:8080/chatroom/charRoomServer";
	//客户端与服务端建立连接，建立连接以后，它会发出一个ws.open事件
	var ws=new WebSocket(wsUrl);
	//连接成功后，提示浏览器客户端输入名称
	ws.onopen=function(){
		var userName=prompt("请给自己取一个名字");
		ws.send(userName);
	}
	//客户端收到服务端发送的消息
	ws.onmessage=function(message){
		//获取以后，在客户端显示,messages是聊天内容的框的id
		messages.innerHTML+=message.data;
	}
	
	//获取某个用户输入的聊天内容，并发送到服务端，让服务端广播给所有人
	 function getMessage(){
		var inputMessage=document.getElementById("inputMessage").value;
		//alert(inputMessage);
		//获取消息以后，要发送给服务端，然后广播给所有用户
		if(typeof(inputMessage)=='undefined'){
			alert("请输入您要发送的消息！");
		}else{
			ws.send(inputMessage);
			//输入框消息清空
			inputMessage.value="";
		}
		
	} 
	//当关闭页面或者用户退出时，会执行一个ws.close()方法
	window.onbeforeunload=function(){
		ws.close();
	}
	//按回车发送信息
	document.onkeyup=function(e){
		if(e.keyCode==13){
			getMessage();
			inputMessage.value="";
		}
	}
	
</script>

Java代码

package com.fjf.chat;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
/**
 * 聊天室的服务端程序
 * @author Administrator
 *
 */
//声明websocket某个服务端的地址
@ServerEndpoint("/charRoomServer")
public class ChatRoomServer {
	private boolean firstFlag=true;
	private Session session;
	private String userName;
	//记录此次聊天室的服务端有多少个连接
	//key代表此次客户端的session的id，value代表此次连接对象
	private static final HashMap<String, Object> connectMap=new HashMap<String, Object>();
	//保存所有用户昵称信息
	//key是session的id，value是用户昵称
	private static final HashMap<String, String> userMap=new HashMap<String, String>();
	
	//服务端收到客户端的连接请求，连接成功后会执行此方法
	@OnOpen
	public void start(Session session) {
		this.session=session;
		connectMap.put(session.getId(), this);
	}
	
	//客户端发来的信息，服务端接收
	@OnMessage
	public void chat(String clientMessage,Session session) {
		//firstFlag为true是第一次进入，第二次进入之后设为false
		ChatRoomServer client=null;
		if(firstFlag) {	
			this.userName=clientMessage;
			//将新进来的用户保存到用户map
			userMap.put(session.getId(), userName);
			//构造发送给客户端的提示信息
			String message=htmlMessage("系统消息：",userName+"进入聊天室");
			//将消息广播给给所有的用户
			//Map.keySet()方法是获取到Map集合的所有的key值
			for(String connectKey:connectMap.keySet()) {
				client=(ChatRoomServer) connectMap.get(connectKey);
				//给对应的web端发送一个文本信息
				try {
					client.session.getBasicRemote().sendText(message);
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
				firstFlag=false;
			}else {
				//构造发送给客户端的提示信息
				String message=htmlMessage(userMap.get(session.getId()),clientMessage);
				//将消息广播给给所有的用户
				//Map.keySet()方法是获取到Map集合的所有的key值
				for(String connectKey:connectMap.keySet()) {
					client=(ChatRoomServer) connectMap.get(connectKey);
					//给对应的web端发送一个文本信息
					try {
						client.session.getBasicRemote().sendText(message);
					} catch (IOException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
			}
		}
	}	
	/**
	 * 前台js的ws.close事件，会触发后台的标注onClose的方法
	 */
	@OnClose
	public void close(Session session) {
		//当某个用户退出时，对其他用户进行广播
		String message=htmlMessage("系统消息", userMap.get(session.getId())+"退出了聊天室");
		userMap.remove(session.getId());
		connectMap.remove(session.getId());
		//将消息广播给给所有的用户
		//Map.keySet()方法是获取到Map集合的所有的key值
		ChatRoomServer client=null;
		for(String connectKey:connectMap.keySet()) {
			client=(ChatRoomServer) connectMap.get(connectKey);
			//给对应的web端发送一个文本信息
			try {
				client.session.getBasicRemote().sendText(message);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
	}
	}
	/**
	 * 渲染页面，把信息构造好标签再发送
	 */
	public String htmlMessage(String userName,String message) {
		StringBuffer stringBuffer=new StringBuffer();
		SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		stringBuffer.append("<article>");
		stringBuffer.append("<span>"+sf.format(new Date())+"</span>");
		stringBuffer.append("<div class='avatar'>");
		stringBuffer.append("<h3>"+userName+"</h3>");
		stringBuffer.append("</div>");
		stringBuffer.append("<div class='msg'>");
		stringBuffer.append("<div class='tri'></div>");
		stringBuffer.append("<div class='msg_inner'>"+message+"</div>");
		stringBuffer.append("</div>");
		stringBuffer.append("</article>");
		
		return stringBuffer.toString();
	}
}

然后聊天室就完工啦！