习惯了微信聊天，利用WebSocket手动实现个聊天功能怎么样？ Posted 2023-03-30 程序员苟哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了习惯了微信聊天，利用WebSocket手动实现个聊天功能怎么样？相关的知识，希望对你有一定的参考价值。
1.背景
基于项目需求，最近需要实现一个简单的聊天功能。日常生活中，大家对于聊天也习以为常，微信、QQ等软件也经常用到，其实我们也可以引入一些第三方的sdk包等去实现，也可以利用WebSocket通信协议去手动实现简单的聊天。本文主要讲述下WebSocket实现的具体步骤及实现的效果图。
2.方案选型及优缺点介绍
方案一 利用http接口手动实现三个接口：sengMsg(消息发送)、receiveMsg(消息接收)、getHistoryMsg(获取历史消息) ，然后前端发送消息时调用sendMsg接口，将数据写入数据库以便获取历史消息使用，接收消息时前端声明一个定时器，每一秒钟去刷新消息接收接口，来获取消息内容显示到聊天框中，最后，如果用户需要翻看历史消息，调用getHistoryMsg接口即可。优点 后端实现简单，且能将聊天消息持久化到数据库永久保存，可以根据聊天室id随时获取消息内容缺点 由于频繁调用接口，服务器和api接口压力比较大，高并发情况下服务器可能会宕机，而且不进行消息发送时，由于定时器的使用，前端频繁请求会造成空跑，显然不太合理方案二 利用已有的WebSocket服务实现聊天功能优点 不用额外自己实现接口，直接按照WebSocket定义的规则直接套用即可缺点 消息没有持久化，如果服务宕机，可能无法查看历史消息3.服务搭建及实现
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
@Configuration
public class WebSocketConfig
//注入一个ServerEndpointExporter
@Bean
public ServerEndpointExporter serverEndpointExporter()
return new ServerEndpointExporter();
/**
* 聊天控制器
* @ServerEndpoint("/chat/userId")中的userId是前端创建会话窗口时当前用户的id,即消息发送者的id
*/
@ServerEndpoint("/chat/userId")
@Component
public class ChatWebSocketController
private final Logger logger = Logger.getLogger(ChatWebSocketController.class);
//onlineCount：在线连接数
private static AtomicInteger onlineCount = new AtomicInteger(0);
//webSocketSet：用来存放每个客户端对应的MyWebSocket对象。
public static List<ChatWebSocketController> webSocketSet = new ArrayList<>();
//存放所有连接人信息
public static List<String> userList = new ArrayList<>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//用户ID
public String userId = "";
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session, @PathParam("userId") String userId)
this.session = session;
this.userId = userId;
this.userList.add(userId) ;
//加入set中
webSocketSet.add(this);
//在线数加1
onlineCount.incrementAndGet();
logger.info("有新连接加入！" + userId + "当前在线用户数为" + onlineCount.get());
JSONObject msg = new JSONObject();
try
msg.put("msg", "连接成功");
msg.put("status", "SUCCESS");
msg.put("userId", userId);
sendMessage(JSON.toJSONString(msg));
catch (Exception e)
logger.debug("IO异常");
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(@PathParam("userId") String userId )
//从set中删除
webSocketSet.remove(this);
onlineCount.decrementAndGet(); // 在线数减1
logger.info("用户"+ userId +"退出聊天！当前在线用户数为" + onlineCount.get());
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, @PathParam("userId") String userId )
//客户端输入的消息message要经过处理后封装成新的message,后端拿到新的消息后进行数据解析,然后判断是群发还是单发,并调用对应的方法
logger.info("来自客户端" + userId + "的消息:" + message);
try
MyMessage myMessage = JSON.parseObject(message, MyMessage.class);
String messageContent = myMessage.getMessage();//messageContent：真正的消息内容
String messageType = myMessage.getMessageType();
if("1".equals(messageType)) //单聊
String recUser = myMessage.getUserId();//recUser：消息接收者
sendInfo(messageContent,recUser,userId);//messageContent：输入框实际内容 recUser：消息接收者 userId 消息发送者
else //群聊
sendGroupInfo(messageContent,userId);//messageContent：输入框实际内容 userId 消息发送者
catch (Exception e)
logger.error("解析失败：", e);
/**
* 发生错误时调用的方法
*
* @OnError
**/
@OnError
public void onError(Throwable error)
logger.debug("Websocket 发生错误");
error.printStackTrace();
public synchronized void sendMessage(String message)
this.session.getAsyncRemote().sendText(message);
/**
* 单聊
* message ： 消息内容，输入的实际内容，不是拼接后的内容
* recUser : 消息接收者
* sendUser : 消息发送者
*/
public void sendInfo( String message , String recUser,String sendUser)
JSONObject msgObject = new JSONObject();//msgObject 包含发送者信息的消息
for (ChatWebSocketController item : webSocketSet)
if (StringUtil.equals(item.userId, recUser))
logger.info("给用户" + recUser + "传递消息:" + message);
//拼接返回的消息，除了输入的实际内容，还要包含发送者信息
msgObject.put("message",message);
msgObject.put("sendUser",sendUser);
item.sendMessage(JSON.toJSONString(msgObject));
/**
* 群聊
* message ： 消息内容，输入的实际内容，不是拼接后的内容
* sendUser : 消息发送者
*/
public void sendGroupInfo(String message,String sendUser)
JSONObject msgObject = new JSONObject();//msgObject 包含发送者信息的消息
if (StringUtil.isNotEmpty(webSocketSet))
for (ChatWebSocketController item : webSocketSet)
if(!StringUtil.equals(item.userId, sendUser)) //排除给发送者自身回送消息,如果不是自己就回送
logger.info("回送消息:" + message);
//拼接返回的消息，除了输入的实际内容，还要包含发送者信息
msgObject.put("message",message);
msgObject.put("sendUser",sendUser);
item.sendMessage(JSON.toJSONString(msgObject));
/**
* Map/Set的key为自定义对象时，必须重写hashCode和equals。
* 关于hashCode和equals的处理，遵循如下规则：
* 1）只要重写equals，就必须重写hashCode。
* 2）因为Set存储的是不重复的对象，依据hashCode和equals进行判断，所以Set存储的对象必须重写这两个方法。
* 3）如果自定义对象做为Map的键，那么必须重写hashCode和equals。
*
* @param o
* @return
*/
@Override
public boolean equals(Object o)
if (this == o)
return true;
if (o == null || getClass() != o.getClass())
return false;
ChatWebSocketController that = (ChatWebSocketController) o;
return Objects.equals(session, that.session);
@Override
public int hashCode()
return Objects.hash(session);
3.4 声明Controller中的MyMessage实体类 public class MyMessage implements Serializable
private static final long serialVersionUID = 1L;
private String userId;
private String message;//消息内容
private String messageType;//消息类型 1 代表单聊 2 代表群聊
public String getUserId()
return userId;
public void setUserId(String userId)
this.userId = userId;
public String getMessage()
return message;
public void setMessage(String message)
this.message = message;
public String getMessageType()
return messageType;
public void setMessageType(String messageType)
this.messageType = messageType;
3.5 声明Controller中的StringUtil工具类 public final class StringUtil
/**
* 对象为空
*
* @param object
* @return
*/
public static boolean isEmpty(Object object)
if (object == null)
return true;
if (object instanceof String && "".equals(((String) object).trim()))
return true;
if (object instanceof List && ((List) object).size() == 0)
return true;
if (object instanceof Map && ((Map) object).isEmpty())
return true;
if (object instanceof CharSequence && ((CharSequence) object).length() == 0)
return true;
if (object instanceof Arrays && (Array.getLength(object) == 0))
return true;
return false;
/**
* 对象不为空
*
* @param object
* @return
*/
public static boolean isNotEmpty(Object object)
return !isEmpty(object);
/**
* 查询字符串中某个字符首次出现的位置 从1计数
*
* @param string 字符串
* @param c
* @return
*/
public static int strFirstIndex(String c, String string)
Matcher matcher = Pattern.compile(c).matcher(string);
if (matcher.find())
return matcher.start() + 1;
else
return -1;
/**
* 两个对象是否相等
*
* @param obj1
* @param obj2
* @return
*/
public static boolean equals(Object obj1, Object obj2)
if (obj1 instanceof String && obj2 instanceof String)
obj1 = ((String) obj1).replace("\\\\*", "");
obj2 = ((String) obj2).replaceAll("\\\\*", "");
if (obj1.equals(obj2) || obj1 == obj2)
return true;
if (obj1.equals(obj2) || obj1 == obj2)
return true;
return false;
/**
* 根据字节截取内容
*
* @param bytes 自定义字节数组
* @param content 需要截取的内容
* @return
*/
public static String[] separatorByBytes(double[] bytes, String content)
String[] contentArray = new String[bytes.length];
double[] array = new double[bytes.length + 1];
array[0] = 0;
//复制数组
System.arraycopy(bytes, 0, array, 1, bytes.length);
for (int i = 0; i < bytes.length; i++)
content = content.substring((int) (array[i] * 2));
contentArray[i] = content;
String[] strings = new String[bytes.length];
for (int i = 0; i < contentArray.length; i++)
strings[i] = contentArray[i].substring(0, (int) (bytes[i] * 2));
return strings;
/**
* 获取指定字符串出现的次数
*
* @param srcText 源字符串
* @param findText 要查找的字符串
* @return
*/
public static int appearNumber(String srcText, String findText)
int count = 0;
Pattern p = Pattern.compile(findText);
Matcher m = p.matcher(srcText);
while (m.find())
count++;
return count;
/**
* 将字符串str每隔2个分割存入数组
*
* @param str
* @return
*/
public static String[] setStr(String str)
int m = str.length() / 2;
if (m * 2 < str.length())
m++;
String[] strings = new String[m];
int j = 0;
for (int i = 0; i < str.length(); i++)
if (i % 2 == 0)
//每隔两个
strings[j] = "" + str.charAt(i);
else
strings[j] = strings[j] + str.charAt(i);
j++;
return strings;
/**
* 定义一个StringBuffer，利用StringBuffer类中的reverse()方法直接倒序输出
* 倒叙字符串
*
* @param s
*/
public static String reverseString2(String s)
if (s.length() > 0)
StringBuffer buffer = new StringBuffer(s);
return buffer.reverse().toString();
else
return "";
/**
* 截取字符串中的所有日期时间
*
* @param str
* @return
*/
public static List<String> dateTimeSubAll(String str)
try
List<String> dateTimeStrList = new ArrayList<>();
String regex = "[0-9]4[-][0-9]1,2[-][0-9]1,2[ ][0-9]1,2[:][0-9]1,2[:][0-9]1,2";
Pattern pattern = compile(regex);
Matcher matcher = pattern.matcher(str);
while (matcher.find())
String group = matcher.group();
dateTimeStrList.add(group);
return dateTimeStrList;
catch (Exception e)
e.getMessage();
return null;
/**
* 截取字符串中的所有日期
*
* @param str
* @return
*/
public static List<String> dateSubAll(String str)
try
List<String> dateStrList = new ArrayList<>();
Pattern pattern = compile("[0-9]4[-][0-9]1,2[-][0-9]1,2");
Matcher matcher = pattern.matcher(str);
while (matcher.find())
String group = matcher.group();
dateStrList.add(group);
return dateStrList;
catch (Exception e)
e.getMessage();
return null;
/**
* 获取随机字符串
*
* @param length
* @return
*/
public static String getRandomString(int length)
String base = "abcdefghijklmnopqrstuvwxyz0123456789";
Random random = new Random();
StringBuffer sb = new StringBuffer();
for (int i = 0; i < length; i++)
int number = random.nextInt(base.length());
sb.append(base.charAt(number));
return sb.toString();
<!DOCTYPE HTML>
<html>
<head>
<title>WebSocket Chat Demo</title>
</head>
<body>
<input id="inputContent" type="text" style="width:600px;"/>
<button onclick="send()">Send</button>
<button onclick="closeConnection()">Close</button>
<div id="msg"></div>
</body>
<script type="text/javascript 该类对应的路径如下：
4.启动服务并测试
页面输入ip+端口建立websocket连接并发送一条消息，测试结果如图：
注意 ：
注意
1.正常情况下，输入框中只输入要发送的实际聊天内容即可，比如“在吗老公，急事”,但是为了更容易测试，页面中输入的是拼接后的json消息体，接收者用户id，以及消息类型，实际开发中数据格式让前端处理即可，前端根据输入的内容拼接成如输入框图所示的数据格式即可 2.messageType来区分单聊还是群聊，但是此处的群聊是建立连接的所有websocket服务，没有区分组概念，如果区分的话，后台接口请求路径中要添加上roomId参数，然后建立连接时将进入该聊天室的用户放入一个map集合中，群聊发送消息时，根据不同的roomId,只给该组的用户推送群聊消息即可
如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo，期间还走过了一段“看似弯曲”的道路，但是我想其实也不算是弯路吧，因为你走过的路必将留下你的足迹。这个小demo看似简单，但是这一路走来自己也是花了不少心思才将其完成，今天就和大家一起分享一下。
刚刚接手这个任务时，我就想能不能使用Node.js来编写聊天室的服务器端，而后才发现这样做却存在“跨域问题”，因为你的前台是部署在Tomcat服务器上的，所以前台和后台的数据无法进行直接的交互，虽然可以间接的进行交互但是却不容易，在此不建议大家采用此种方法，可直接采用Java+html实现网页版聊天室。我将首先介绍客户端的构造而后介绍服务器端：
客户端
【1】 页面的编写（使用HTML编写）
<body>
<div class="container">
<center><h1>欢迎光临聊天室 </h1></center>
<div id="message"></div>
昵称： <input id="username" type="text"/>
内容： <input id="text" type="text" style="width:300px"/>
<button onclick="send()">发送</button>
<button onclick="closeWebSocket()">退出聊天室</button>
</div>
</body> 说明：
在此我首先放置了一个ID 名为message的div用来显示存放的消息
然后我放置了两个input标签：一个存放昵称，另一个存放用户要发出去的昵称
最后设置两个按钮用来发送消息和退出聊天页面的脚本编写
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if(‘WebSocket‘ in window){
websocket = new
地址格式是：主机名+项目名+客户端注明的名称
WebSocket("ws://localhost:8080/Chat_01/websocket");
}
else{
alert(‘您的浏览器不支持 websocket！‘)
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
alert("链接成功,欢迎加入聊天室！");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function(){
var username=document.getElementById(‘username‘).value;
setMessageInnerHTML(getNowFormatDate()+" "+username+" 退出了聊天室！");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById(‘message‘).innerHTML += innerHTML + ‘‘;
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var username=document.getElementById(‘username‘).value;
var message = document.getElementById(‘text‘).value;
websocket.send(getNowFormatDate()+" "+username+"说: "+message+"<br/>");
//发送消息后，发送消息框自动清空
document.getElementById(‘text‘).value="";
}
function getNowFormatDate() {
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
return myDate.toLocaleString( ); //获取日期与时间
}
</script> 说明：以上几个方法例如onclose，onmessage均是websocket自带的方法，大家只需要在websocket文档上查看各个函数是什么功能。
服务器端
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。
@ServerEndpoint("/websocket")
public class MyWebSocket {
// 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
// concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
// 与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this); // 加入set中
addOnlineCount(); // 在线数加1
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); // 从set中删除
subOnlineCount(); // 在线数减1
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
}
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
// 群发消息
for (MyWebSocket item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
// this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
MyWebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
MyWebSocket.onlineCount--;
}
}
程序中我对重要的部门都标记了注释，相信大家只要稍微看过就可以看懂，在此我就不一一赘述了，大家如果在运行过程中有问题的可以在文章下方进行评论，我们可以一起讨论一下。最后我附上整个项目文件的位置以供小伙伴们下载运行。http://pan.baidu.com/s/1pLQbeDP 密码：t2vp
以上是关于习惯了微信聊天，利用WebSocket手动实现个聊天功能怎么样？的主要内容，如果未能解决你的问题，请参考以下文章
利用websocket实现聊天小应用
如何利用WebSocket实现网页版聊天室
如何利用WebSocket实现网页版聊天室
基于python以及AIUI WebSocket，WeChatPYAPI实现的微信聊天机器人
利用websocket+Vuex完成一个实时聊天软件（前端部分）
微信小程序---Socket聊天功能实现
