springboot+websocket 实现IM聊天功能，支持一对一、一对多聊天
gitbub地址：  https://github.com/jason1210/chat
若有什么疑问，欢迎留言探讨！

昨天使用HTML5的websocket与Tomcat实现了多人聊天，那是最简单也是最基本的，其中注意的就是开发环境，要满足jdk1.7和tomcat8，当然了tom7 的7.063也行！
本文主要和大家介绍HTML5 WebSocket实现点对点聊天的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
因为是模拟的，这里给出的是两个JSP页面A和B，里面分别向session里放了两个名字小明和小化，注意，这里的session是HttpSession session，之前多人聊天里的session是javax.websocket.Session;不一样的。
这里想一下， 使用HttpSession session控制聊天的用户，好处怎样，自己猜~~~
这里没有使用注解，传统的web.xml配置方式，首先在系统启动的时候调用InitServlet方法
public class InitServlet extends HttpServlet {
private static final long serialVersionUID = -3163557381361759907L;
private static HashMap socketList;
public void init(ServletConfig config) throws ServletException {
InitServlet.socketList = new HashMap();
super.init(config);
System.out.println("初始化聊天容器");
}
public static HashMap getSocketList() {
return InitServlet.socketList;
}
}
这里你可以跟自己的系统结合，对应的web配置代码如下：
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
websocket
socket.MyWebSocketServlet
websocket
*.do
initServlet
socket.InitServlet
1
index.jsp
这就是最普通的前台像后台发送请求的过程，也是很容易嵌入到自己的系统里
MyWebSocketServlet：
public class MyWebSocketServlet extends WebSocketServlet {
public String getUser(HttpServletRequest request){
String userName = (String) request.getSession().getAttribute("user");
if(userName==null){
return null;
}
return userName;
}
protected StreamInbound createWebSocketInbound(String arg0,
HttpServletRequest request) {
System.out.println("用户" + request.getSession().getAttribute("user") + "登录");
return new MyMessageInbound(this.getUser(request));
}
}
MyMessageInbound继承MessageInbound
package socket;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.HashMap;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;
import util.MessageUtil;
public class MyMessageInbound extends MessageInbound {
private String name;
public MyMessageInbound() {
super();
}
public MyMessageInbound(String name) {
super();
this.name = name;
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
}
@Override
protected void onTextMessage(CharBuffer msg) throws IOException {
//用户所发消息处理后的map
HashMap messageMap = MessageUtil.getMessage(msg);    //处理消息类
//上线用户集合类map
HashMap userMsgMap = InitServlet.getSocketList();
String fromName = messageMap.get("fromName");    //消息来自人 的userId
String toName = messageMap.get("toName");         //消息发往人的 userId
//获取该用户
MessageInbound messageInbound = userMsgMap.get(toName);    //在仓库中取出发往人的MessageInbound
MessageInbound messageFromInbound = userMsgMap.get(fromName);
if(messageInbound!=null && messageFromInbound!=null){     //如果发往人 存在进行操作
WsOutbound outbound = messageInbound.getWsOutbound();
WsOutbound outFromBound = messageFromInbound.getWsOutbound();
String content = messageMap.get("content");  //获取消息内容
String msgContentString = fromName + "说: " + content;   //构造发送的消息
//发出去内容
CharBuffer toMsg =  CharBuffer.wrap(msgContentString.toCharArray());
CharBuffer fromMsg =  CharBuffer.wrap(msgContentString.toCharArray());
outFromBound.writeTextMessage(fromMsg);
outbound.writeTextMessage(toMsg);  //
outFromBound.flush();
outbound.flush();
}
}
@Override
protected void onClose(int status) {
InitServlet.getSocketList().remove(this);
super.onClose(status);
}
@Override
protected void onOpen(WsOutbound outbound) {
super.onOpen(outbound);
//登录的用户注册进去
if(name!=null){
InitServlet.getSocketList().put(name, this);//存放客服ID与用户
}
}
@Override
public int getReadTimeout() {
return 0;
}
}
在onTextMessage中处理前台发出的信息，并封装信息传给目标
还有一个messageutil
package util;
import java.nio.CharBuffer;
import java.util.HashMap;
public class MessageUtil {
public static HashMap getMessage(CharBuffer msg) {
HashMap map = new HashMap();
String msgString  = msg.toString();
String m[] = msgString.split(",");
map.put("fromName", m[0]);
map.put("toName", m[1]);
map.put("content", m[2]);
return map;
}
}
当然了，前台也要按照规定的格式传信息
pageEncoding="UTF-8"%>
Index
var ws = null;
function startWebSocket() {
if ('WebSocket' in window)
ws = new WebSocket("ws://localhost:8080/WebSocketUser/websocket.do");
else if ('MozWebSocket' in window)
ws = new MozWebSocket("ws://localhost:8080/WebSocketUser/websocket.do");
else
alert("not support");
ws.onmessage = function(evt) {
//alert(evt.data);
console.log(evt);
// $("#xiaoxi").val(evt.data);
setMessageInnerHTML(evt.data);
};
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '
';
}
ws.onclose = function(evt) {
//alert("close");
document.getElementById('denglu').innerHTML="离线";
};
ws.onopen = function(evt) {
//alert("open");
document.getElementById('denglu').innerHTML="在线";
document.getElementById('userName').innerHTML='小化';
};
}
function sendMsg() {
var fromName = "小化";
var toName = document.getElementById('name').value;  //发给谁
var content = document.getElementById('writeMsg').value; //发送内容
ws.send(fromName+","+toName+","+content);//注意格式
}
聊天功能实现
登录状态：
正在登录
登录人：
发送给谁：
发送内容：
聊天框：
这是A.jsp页面，B同上
通过以上代码，就可以实现一个点对点的聊天功能，如果做的大，可以做成一个web版的聊天系统，包括聊天室和单人聊天，都说websocket不支持二进制的传输，但是看到个大流说了这样的话
不过现在做下来 感觉使用二进制的意义不是很大。很久以前就一直困混，怎么都说JS不支持二进制，发现其实只是一堆坑货对这个没研究。。(用的是filereader)
相关推荐：

Java实现网页一对一  一对多实时聊天websocket
后台代码 最重要的类
package com.socket.websocket.chat;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;
import java.io.File;
import java.io.IOException;
import java.util.Hashtable;
import java.util.Map;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
/**
 * websocket
 * @author CHHUANG
 */
@ServerEndpoint("/webSocket/{senderId}") // 该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。
@Component
public class WebChat {
    // 用来存放每个客户端对应的ChatAnnotation对象，实现服务端与单一客户端通信的话，使用Map来存放，其中Key可以为用户标识，hashtable比hashmap线程安全
    private static Map<String, WebChat> webSocketMap = new Hashtable();
    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    /**
     * 连接建立成功调用的方法
     * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(@PathParam(value="senderId") String senderId, Session session) {
        this.session = session;
        webSocketMap.put(senderId,this);//加入map中
        System.out.println(senderId+"连接加入！当前在线人数为"+getOnlineCount());
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(@PathParam(value="senderId") String userId) {
        webSocketMap.remove(userId);
        System.out.println(userId+"关闭连接！当前在线人数为" + getOnlineCount());
    }
    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(@PathParam(value="senderId") String senderId, String message, Session session) {
        // 群发消息
        try {
            //将前端发送的 JSON 字符串转换为 JSON 对象
            JSONObject jsonMessge = JSON.parseObject(message);
            //获取接收者ID列表
            JSONArray list = jsonMessge.getJSONArray("userList");
            //获取发送者的聊天对象
            WebChat userMap = webSocketMap.get(senderId);
            //获取发送的消息
            String mess=jsonMessge.getString("mess");
                //为自己发送一条消息
                userMap.sendMessage(mess);
                    //遍历消息接受者列表
                for (Object receiverId : list) {
                    //获取消息接受者
                    WebChat receiver = webSocketMap.get(receiverId);
                    //调用session的发送消息方法  将消息发送到客户端
                    receiver.sendMessage(mess);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
    }
    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(@PathParam(value="userId") String userId, Session session, Throwable error) {
        System.out.println(userId+"发生错误");
        error.printStackTrace();
    }

    /**
     * 发送消息
     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 发送文件
     * @throws IOException
     */
    public void sendFile(File file)throws IOException{
        this.session.getAsyncRemote().sendObject(file);
    }

    public static synchronized int getOnlineCount() {
        return webSocketMap.size();
    }

}


配置类
package com.socket.websocket.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        System.out.println(">>>>>>>>>>>>>>>>>启用 WebSocket");
        return new ServerEndpointExporter();
    }
}

pom.xml
<!--websocket连接需要使用到的包-->
	<dependency>
	        <groupId>javax.websocket</groupId>
	        <artifactId>javax.websocket-api</artifactId>
	        <version>1.1</version>
	        <scope>provided</scope>
	    </dependency>
	    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- webSocket 结束-->

        <!-- fastjson JSON包-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.31</version>
        </dependency>

前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    input#chat {
        width: 410px
    }
    #console-container {
        width: 400px;
    }

    #console {
        border: 1px solid #CCCCCC;
        border-right-color: #999999;
        border-bottom-color: #999999;
        height: 170px;
        overflow-y: scroll;
        padding: 5px;
        width: 100%;
    }

    #console p {
        padding: 0;
        margin: 0;
    }
</style>
<body>
<div>
    <p>
        <input type="text" placeholder="type and press enter to chat" id="chat" />
    </p>
    <div id="console-container">
        <div id="console"></div>
    </div>

    <script type="text/javascript">
        var Console = {};
        var mess={};
		var userList=[];
		var senderId=prompt("请输入你的账号");
        Console.log = (function(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.innerHTML = message;
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        });
        var Chat = {};
        Chat.socket = null;
        Chat.connect = (function(host) {
            if ('WebSocket' in window) {
                Chat.socket = new WebSocket(host);
            } else if ('MozWebSocket' in window) {
                Chat.socket = new MozWebSocket(host);
            } else {
                Console.log('错误');
                return;
            }
            Chat.socket.onopen = function() {
                Console.log('打开连接');
                document.getElementById('chat').onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        Chat.sendMessage();
                    }
                };
            };
            Chat.socket.onclose = function() {
                document.getElementById('chat').onkeydown = null;
                Console.log('关闭.');
            };
            Chat.socket.onmessage = function(message) {
                Console.log(message.data);
            };
        });
        Chat.initialize = function() {
            Chat.connect('ws://127.0.0.1:8080/webSocket/'+senderId);
        };
        Chat.sendMessage = (function() {
			
            var message = document.getElementById('chat').value;
			
			var receiverIds=prompt("请输入接收者账号用逗号分隔");
			
			userList=receiverIds.split(",");
			
			mess.userList=userList;
			
			mess.mess=message;
			
			var strmee=JSON.stringify(mess)
			
            if (message != '') {
				//发送
                Chat.socket.send(strmee);
				//清空输入框
                document.getElementById('chat').value='';
            }
        });
        Chat.initialize();
    </script>
</div>
</body>
</html>

第一次发帖…复制别人的稍微做了修改  可以把html打开多个页面进行测试

用的是spring boot  有条件的可以在 我的主页去找源码

没条件的去这里 https://pan.baidu.com/s/1DcnrdiSlh1CQAe9SUg5rcg

取件码：hhva

WebSocket是现在最流行的实现多人在线聊或者私聊的技术，它可以实现客户端到客户端的通信，和以往的TCP和UDP不一样，它俩是客户端到服务端的通信，而且服务端不能直接给客户端发送消息，但是WebSocket不仅可以客户端和客户端之间通信，服务端也可以直接发送消息给客户端。

下面实现的一个多人的在线聊天室，前台聊天框是在网上找的模板，该聊天室具有的功能如下

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

下面是代码，这里说明一点

里面的注解像@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();
	}
}


然后聊天室就完工啦！