1基于WebSocket的网页聊天室
1.1 需求
通过 websocket 实现一个简易的聊天室功能 。
1）. 登陆聊天室
2）. 登陆之后，进入聊天界面进行聊天
登陆成功后，呈现出以后的效果：
当我们想和李四聊天时就可以点击 好友列表 中的 李四，效果如下：
接下来就可以进行聊天了，张三 的界面如下：
李四 的界面如下：
1.2 实现流程
1.3 消息格式
{"toName":"张三","message":"你好"}
-
服务端 --> 客户端
-
系统消息格式：{"isSystem":true,"fromName":null,"message"：["李四","王五"]}
-
推送给某一个的消息格式：{"isSystem":false,"fromName":"张三","message"："你好"}
1.4 功能实现
1.4.1 创建项目，导入相关jar包的坐标
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.5.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--devtools热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>true</scope>
</dependency>
</dependencies>
<build>
<plugins>
<!-- 打jar包时如果不配置该插件，打出来的jar包没有清单文件 -->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
1.4.2 引入静态资源文件
1.4.3 引入公共资源
pojo类
/**
* @version v1.0
* @ClassName: Message
* @Description: 浏览器发送给服务器的websocket数据
* @Author: 黑马程序员
public class Message {
private String toName;
private String message;
public String getToName() {
return toName;
public void setToName(String toName) {
this.toName = toName;
public String getMessage() {
return message;
public void setMessage(String message) {
this.message = message;
}
/**
* @version v1.0
* @ClassName: ResultMessage
* @Description: 服务器发送给浏览器的websocket数据
* @Author: 黑马程序员
public class ResultMessage {
private boolean isSystem;
private String fromName;
private Object message;//如果是系统消息是数组
public boolean getIsSystem() {
return isSystem;
public void setIsSystem(boolean isSystem) {
this.isSystem = isSystem;
public String getFromName() {
return fromName;
public void setFromName(String fromName) {
this.fromName = fromName;
public Object getMessage() {
return message;
public void setMessage(Object message) {
this.message = message;
}
/**
* @version v1.0
* @ClassName: Result
* @Description: 用于登陆响应回给浏览器的数据
* @Author:
public class Result {
private boolean flag;
private String message;
public boolean isFlag() {
return flag;
public void setFlag(boolean flag) {
this.flag = flag;
public String getMessage() {
return message;
public void setMessage(String message) {
this.message = message;
}
MessageUtils工具类、
/**
* @version v1.0
* @ClassName: MessageUtils
* @Description: 用来封装消息的工具类
* @Author:
public class MessageUtils {
public static String getMessage(boolean isSystemMessage,String fromName, Object message) {
try {
ResultMessage result = new ResultMessage();
result.setIsSystem(isSystemMessage);
result.setMessage(message);
if(fromName != null) {
result.setFromName(fromName);
ObjectMapper mapper = new ObjectMapper();
return mapper.writeValueAsString(result);
} catch (JsonProcessingException e) {
e.printStackTrace();
return null;
}
1.4.4 登陆功能实现
$(function() {
$("#btn").click(function() {
$.get("login",$("#loginForm").serialize(),function(res) {
if(res.flag) {
//跳转到 main.html页面
location.href = "main.html";
} else {
$("#err_msg").html(res.message);
},"json");
})
UserController：进行登陆逻辑处理
@RestController
public class UserController {
@RequestMapping("/login")
public Result login(User user, HttpSession session) {
Result result = new Result();
if(user != null && "123".equals(user.getPassword())) {
result.setFlag(true);
//将用户名存储到session对象中
session.setAttribute("user",user.getUsername());
} else {
result.setFlag(false);
result.setMessage("登陆失败");
return result;
}
1.4.5 获取当前登录的用户名
-
main.html：页面加载完毕后，发送请求获取当前登录的用户名
var username;
$(function() {
$.ajax({
url:"getUsername",
success:function(res) {
username = res;
$("#userName").html("用户：" + res + "<span style='float: right;color: green'>在线</span>");
async:false
}
UserController
在UserController中添加一个getUsername方法，用来从session中获取当前登录的用户名并响应回给浏览器
@RequestMapping("/getUsername")
public String getUsername(HttpSession session) {
String username = (String) session.getAttribute("user");
return username;
}
1.5.6 聊天室功能
客户端实现
在main.html页面实现前端代码：
var toName;
var username;
function showChat(name) {
toName = name;
//清除聊天区的数据
$("#msgs").html("");
//现在聊天对话框
$("#chatArea").css("display","inline");
//显示“正在和谁聊天”
$("#chatMes").html("正在和 <font face=\"楷体\">"+toName+"</font> 聊天");
//切换用户，需要将聊天记录渲染到聊天区
var storeData = sessionStorage.getItem(toName);
if(storeData != null) {
$("#msgs").html(storeData);
$(function() {
$.ajax({
url:"getUsername",
success:function(res) {
username = res;
//显示在线信息
$("#userName").html(" 用户："+res+"<span style='float: right;color: green'>在线</span>");
async: false
//创建websocket
var ws;
if(window.WebSocket) {
ws = new WebSocket("ws://localhost/chat");
//绑定事件
ws.onopen = function(evt) {
//显示在线信息
$("#userName").html(" 用户："+username+"<span style='float: right;color: green'>在线</span>");
ws.onmessage = function(evt) {
//接收服务器推送的消息
var data = evt.data;
//将该字符串数据转换为json
var res = JSON.parse(data);
//判断是系统消息还是推送给个人的消息
if(res.isSystem) {
//系统消息
var names = res.message;
var userListStr = "";
var broadcastStr = "";
for(var name of names) {
if(name != username) {
userListStr += "<li class=\"rel-item\"><a onclick='showChat(\""+name+"\")'>"+name+"</a></li>";
broadcastStr += "<li class=\"rel-item\" style=\"color: #9d9d9d;font-family: 宋体\">您的好友 "+name+" 已上线</li>";
//将数据渲染到页面
$("#userlist").html(userListStr);
$("#broadcastList").html(broadcastStr);
} else {
//非系统消息
var content = res.message;
//拼接聊天区展示的数据
var str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"background-image: url(img/avatar/Member002.jpg)\"></div><div class=\"msg-ball\">"+content+"</div></div></div>";
//有可能现在不是和指定用户的聊天框，所以需要进行判断
var storeData = sessionStorage.getItem(res.fromName);
if(storeData != null) {
storeData += str;
} else {
storeData = str;
sessionStorage.setItem(res.fromName,storeData);
if(toName == res.fromName) {
//将数据追加到聊天区
$("#msgs").append(str);
ws.onclose = function() {
//显示在线信息
$("#userName").html(" 用户："+username+"<span style='float: right;color: red'>离线</span>");
//给发送按钮绑定点击事件
$("#submit").click(function() {
//获取输入的内容
var data = $("#context_text").val();
//将该文本框清空
$("#context_text").val("");
//拼接消息
var str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">"+data+"</div></div></div>";
$("#msgs").append(str);
//将聊天记录进行存储sessionStorage
var storeData = sessionStorage.getItem(toName);
if(storeData != null) {
//将此次的内容拼接到storeData中
str = storeData + str;
//将消息存储到sessionStorage中
sessionStorage.setItem(toName,str);
//定义服务端需要的数据格式
var message = {toName:toName,message:data};
//将输入的数据发送给服务器
ws.send(JSON.stringify(message));
})
服务端代码实现
WebSocketConfig 类实现
开启 springboot 对websocket的支持
@Configuration
public class WebSocketConfig {
@Bean
//注入ServerEndpointExporter，自动注册使用@ServerEndpoint注解的
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
ChatEndPoint 类实现
@ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)
@Component
public class ChatEndpoint {
//用来存储每一个客户端对象对应的ChatEndpoint对象
private static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();
//和某个客户端连接对象，需要通过他来给客户端发送数据
private Session session;
//httpSession中存储着当前登录的用户名
private HttpSession httpSession;
@OnOpen
//连接建立成功调用
public void onOpen(Session session, EndpointConfig config) {
//需要通知其他的客户端，将所有的用户的用户名发送给客户端
this.session = session;
//获取HttpSession对象
HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
//将该httpSession赋值给成员httpSession
this.httpSession = httpSession;
//获取用户名
String username = (String) httpSession.getAttribute("user");
//存储该链接对象
onlineUsers.put(username,this);
//获取需要推送的消息
String message = MessageUtils.getMessage(true, null, getNames());
//广播给所有的用户
broadcastAllUsers(message);
private void broadcastAllUsers(String message) {
try {
//遍历 onlineUsers 集合
Set<String> names = onlineUsers.keySet();
for (String name : names) {
//获取该用户对应的ChatEndpoint对象
ChatEndpoint chatEndpoint = onlineUsers.get(name);
//发送消息
chatEndpoint.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
private Set<String> getNames() {
return onlineUsers.keySet();
@OnMessage
//接收到消息时调用
public void onMessage(String message,Session session) {
try {
//获取客户端发送来的数据 {"toName":"张三","message":"你好"}
ObjectMapper mapper = new ObjectMapper();
Message mess = mapper.readValue(message, Message.class);
//获取当前登录的用户名
String username = (String) httpSession.getAttribute("user");
//拼接推送的消息
String data = MessageUtils.getMessage(false, username, mess.getMessage());
//将数据推送给指定的客户端
ChatEndpoint chatEndpoint = onlineUsers.get(mess.getToName());
chatEndpoint.session.getBasicRemote().sendText(data);
} catch (Exception e) {
e.printStackTrace();
@OnClose
//连接关闭时调用
public void onClose(Session session) {
//获取用户名
String username = (String) httpSession.getAttribute("user");
//移除连接对象
onlineUsers.remove(username);
//获取需要推送的消息
String message = MessageUtils.getMessage(true, null, getNames());
//广播给所有的用户
broadcastAllUsers(message);
}
GetHttpSessionConfigurator 配置类实现
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {
@Override
public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) {
HttpSession httpSession = (HttpSession) request.getHttpSession();
config.getUserProperties().put(HttpSession.class.getName(),httpSession);
MongoDB 规则配置 mongodb27017
参考前一篇博客，首先得成功安装mongodb 一、连接数据库：首先要实现增删改查数据，我们必须与数据库建立连接（注：先要打开mongodb，默认27017的端口）：var mongo=require("mongodb");
var host="localhost";
var port=27017; // 默认是27017端口
var server=new mongo.Server(
java动态和静态的区别是什么 java动态加载和静态加载
JAVA中的静态加载类是编译时刻加载类 动态加载类指的是运行时刻加载类二者有什么区别呢举一个例子 现在我创建了一个类 实现的功能假设为通过传入的参数调用具体的类和方法class office
public static void main(String args[])
if("word".equals(args[0])
word w=new word
java 人才系统 java人力资源管理系统 在线
校园人力资源管理系统：学校部门管理，教室管理，学历信息管理，职务，教师职称，奖励，学历，社会关系，工作经历，培训管理，公告等信息功能等等。 部门控制层：@RequestMapping("/Department")
@RestController
public class DepartmentController {
@Autowired
字符串增删改查一、增 1） 使用运算符号+s = "Hello"
s = s+"World"
print(s) # 返回'HelloWorld'二、删、改update**1）直接重新赋值，或者直接将字符串从内存中清除； 字符串是不可变类型的元素，不能像list一样直接删除或者更新字符串中的某些元素。因此字符串的update和del，只能整个字符串操作。s = "Java"
s = "Pytho
