东莞网站推广流程,权威网站,国内 设计网站的公司网站,小游戏中心目录
一、实现聊天室原理
二、聊天室前端代码
三、聊天室后端代码#xff08;重点#xff09;
四、聊天室实现效果展示 一、实现聊天室原理
1.1 介绍websocket协议 websocket是一种通信协议#xff0c;再通过websocket实现弹幕聊天室时候#xff0c;实现原理是客户端首…
目录
一、实现聊天室原理
二、聊天室前端代码
三、聊天室后端代码重点
四、聊天室实现效果展示 一、实现聊天室原理
1.1 介绍websocket协议 websocket是一种通信协议再通过websocket实现弹幕聊天室时候实现原理是客户端首先使用http协议请求服务器将通信协议转为websocket协议。
1.2、websocket的API
websocket分为客户端与服务器其实现的API都不一样。 前端创建websocket案例
script
let ws new WebSocket(ws:/localhost/chat)
ws.open function(){
};ws.onmessage function(evt){//通过evt.data 可以获取服务器发送的数据
};ws.onclose function(){
};/script 1.3 项目实现流程 1.4 项目结构 二、聊天室前端代码
前端核心在于两个一个登陆界面一个聊天室界面。
登陆界面
!DOCTYPE html
html langen
headtitle聊天室-登录/titlemeta nameviewport contentwidthdevice-width, initial-scale1/meta http-equivContent-Type contenttext/html; charsetutf-8/meta namekeywordscontentTransparent Sign In Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements/script typeapplication/x-javascriptaddEventListener(load, function () {setTimeout(hideURLbar, 0);}, false);function hideURLbar() {window.scrollTo(0, 1);}/scriptscript srcjs/jquery-1.9.1.min.js/scriptlink relicon hrefimg/chat.ico typeimage/x-icon/link relstylesheet hrefcss/font-awesome.css/ !-- Font-Awesome-Icons-CSS --link relstylesheet hrefcss/login.css typetext/css mediaall/ !-- Style-CSS --
/headbody classbackground
div classheader-w3lh1聊天室/h1
/div
div classmain-content-agile idappdiv classsub-main-w3h2登录/h2form idloginFormdiv classicon1input placeholder用户名 idusername v-modeluser.username typetext//divdiv classicon2input placeholder密码 idpassword v-modeluser.password typepassword//divdiv classclear/divinput typebutton idbtn1 clicklogin value登录/div classicon1span iderr_msg stylecolor: red; {{errMessage}}/span/div/form/div
/div
div classfooterp北京传智播客教育科技有限公司 版权所有Copyright 2006-2019 All Rights Reserved /p
/div
script srcjs/vue.js/script
script srcjs/axios-0.18.0.js/script
scriptnew Vue({el:#app,data() {return {errMessage: ,user:{username:,password:}}},methods: {login() {axios.post(user/login,this.user).then(res {//判断登陆是否成功if(res.data.flag) {location.href main.html} else {this.errMessage res.data.message;}});}}});
/script
/body
/html
效果
聊天室页面
!DOCTYPE html
html langen
headtitle黑马畅聊-登录/titlemeta nameviewport contentwidthdevice-width, initial-scale1/meta http-equivContent-Type contenttext/html; charsetutf-8/meta namekeywordscontentTransparent Sign In Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements/script typeapplication/x-javascriptaddEventListener(load, function () {setTimeout(hideURLbar, 0);}, false);function hideURLbar() {window.scrollTo(0, 1);}/scriptscript srcjs/jquery-1.9.1.min.js/scriptlink relicon hrefimg/chat.ico typeimage/x-icon/link relstylesheet hrefcss/font-awesome.css/ !-- Font-Awesome-Icons-CSS --link relstylesheet hrefcss/login.css typetext/css mediaall/ !-- Style-CSS --
/headbody classbackground
div classheader-w3lh1聊天室/h1
/div
div classmain-content-agile idappdiv classsub-main-w3h2登录/h2form idloginFormdiv classicon1input placeholder用户名 idusername v-modeluser.username typetext//divdiv classicon2input placeholder密码 idpassword v-modeluser.password typepassword//divdiv classclear/divinput typebutton idbtn1 clicklogin value登录/div classicon1span iderr_msg stylecolor: red; {{errMessage}}/span/div/form/div
/div
div classfooterp北京传智播客教育科技有限公司 版权所有Copyright 2006-2019 All Rights Reserved /p
/div
script srcjs/vue.js/script
script srcjs/axios-0.18.0.js/script
scriptnew Vue({el:#app,data() {return {errMessage: ,user:{username:,password:}}},methods: {login() {axios.post(user/login,this.user).then(res {//判断登陆是否成功if(res.data.flag) {location.href main.html} else {this.errMessage res.data.message;}});}}});
/script
/body
/html 三、聊天室后端代码重点
3.1首先需要创建springboot项目并导入以下jar包.
!-- 使用阿里巴巴的fastjson--dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.78/version/dependency!-- 实现websocket的jar包--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependency3.2 实现websocket还需要对其进行配置创建两个配置类 第一个进行websocketConfig的配置
Configuration
public class WebsocketConfig {// 将ServerEndPointExplorer加入ioc容器中Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}
第二个配置是获取httpsession配置
public class GetHttpSessionConfig extends ServerEndpointConfig.Configurator {Overridepublic void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {//获取HttpSession对象HttpSession httpSession (HttpSession) request.getHttpSession();//将httpSession对象保存起来sec.getUserProperties().put(HttpSession.class.getName(),httpSession);}
} 项目中需要ServerEndPoint存储所有用户的session对象通过session实现用户之间的交流。所以还需要获取所有httpsession对象。 3.3 确定消息格式JSON 为了确保实现的消息格式的准确需要创建对应工具类确保对应的格式的准确。
public class MessageUtils {public static String getMessage(boolean isSystemMessage,String fromName, Object message) {ResultMessage result new ResultMessage();result.setSystem(isSystemMessage);result.setMessage(message);if(fromName ! null) {result.setFromName(fromName);}return JSON.toJSONString(result);}
}
3.4 然后就是所有实体类的创建。
对于前端实体类需要用户封装http请求实体。
对于聊天室需要用户发送的信息服务器给用户发送的信息。 Data
public class Result {private boolean flag;private String message;
}
Data
public class User {private String userId;private String username;private String password;
}
Data
public class Message {private String toName;private String message;
}
Data
public class ResultMessage {private boolean isSystem;private String fromName;private Object message;//如果是系统消息是数组
}
3.5 后端基础功能的实现
后端实现登陆功能用户名可以随意输入但是密码必须是123。 PostMapping(/login)public Result login(RequestBody 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;}后端实现获取用户名称功能 GetMapping(/getUsername)public String getUsername(HttpSession session) {String username (String) session.getAttribute(user);return username;} 3.6 通过session发送消息的核心功能重点
ServerEndpoint(value /chat,configurator GetHttpSessionConfig.class)
Component
public class ChatEndpoint {private static MapString,Session onlineUsers new ConcurrentHashMap();static {// 初始化onlineUsers对象onlineUsers new ConcurrentHashMap();}private HttpSession httpSession;/*** 建立websocket连接后被调用* param session*/OnOpenpublic void onOpen(Session session, EndpointConfig config) {//1将session进行保存this.httpSession (HttpSession) config.getUserProperties().get(HttpSession.class.getName());String user (String) this.httpSession.getAttribute(user);onlineUsers.put(user,session);//2广播消息。需要将登陆的所有的用户推送给所有的用户String message MessageUtils.getMessage(true,null,getFriends());broadcastAllUsers(message);}public Set getFriends() {SetString set onlineUsers.keySet();return set;}private void broadcastAllUsers(String message) {try {//遍历map集合SetMap.EntryString, Session entries onlineUsers.entrySet();for (Map.EntryString, Session entry : entries) {//获取到所有用户对应的session对象Session session entry.getValue();//发送消息session.getBasicRemote().sendText(message);}} catch (Exception e) {//记录日志}}/*** 浏览器发送消息到服务端该方法被调用** 张三 -- 李四* param message*/OnMessagepublic void onMessage(String message) {try {//将消息推送给指定的用户Message msg JSON.parseObject(message, Message.class);//获取 消息接收方的用户名String toName msg.getToName();String mess msg.getMessage();//获取消息接收方用户对象的session对象Session session onlineUsers.get(toName);String user (String) this.httpSession.getAttribute(user);String msg1 MessageUtils.getMessage(false, user, mess);session.getBasicRemote().sendText(msg1);} catch (Exception e) {//记录日志}}/*** 断开 websocket 连接时被调用* param session*/OnClosepublic void onClose(Session session) {//1,从onlineUsers中剔除当前用户的session对象String user (String) this.httpSession.getAttribute(user);onlineUsers.remove(user);//2,通知其他所有的用户当前用户下线了String message MessageUtils.getMessage(true,null,getFriends());broadcastAllUsers(message);}
} 代码重点在于对session的使用将内容放在对应用户session的共享域中后端则负责统一管理所有用户的session。 四、聊天室实现效果展示
4.1 登陆功能 4.2 在线与不在线当后端运行后才能显示在线 4.3 当有其他人登陆时候弹出对应用户名称 4.4 通过点击对应的名称进行一对一聊天 4.5 实现聊天功能
