外贸网站建设推广培训,营销是做什么,上传网站模板建站,北戴河区建设局网站一、什么是 WebSocket#xff1f;
WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中#xff0c;浏览器和服务器只需要完成一次握手#xff0c…一、什么是 WebSocket
WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单允许服务端主动向客户端推送数据。在WebSocket API中浏览器和服务器只需要完成一次握手两者之间就直接可以创建持久性的连接并进行双向数据传输。
二、WebSocket 的应用场景
WebSocket 的特点决定了他在一些 实时双向通信、低延迟、推送等功能的应用场景下的独特优势。
在WebSocket 出现之前Web 程序想要进行实时通信是非常麻烦的因为 HTTP 是一种无状态、无连接、单向的应用层协议它无法实现服务器主动向客户端推送消息并且这种单向请求的特点注定了客户端实时获取服务端的变化就非常麻烦通常情况下需要客户端频繁的对服务器进行轮询这种方式不仅效率低实时性不好而且这种频繁的请求和响应对服务器来说也是一种负担。
三、WebSocket API
1、客户端/浏览器 API
由于 WebSocket 协议是 HTML5开始支持的所以想要使用 WebSocket 协议首先保证浏览器支持 HTML5.
websocket 对象创建
let ws new WebSocket(URL);注这里的 url 格式为 协议://ip地址:端口号/访问路径。协议名称固定为 ws
websocket 事件
事件事件处理程序描述openws.onopen连接建立时触发messagews.onmessage客户端接收服务端数据时触发errorws.onerror通信发生错误时触发closews.onclose连接关闭时触发
websocket 方法
方法描述ws.send()使用连接发送数据到服务器ws.close()关闭连接
2、服务端 API
Tomcat 从 7.0.5 版本开始支持 WebSocket所以使用时注意 Tomcat 版本不能低于 7.0.5。在Java中Endpoint 表示服务器 Websocket 连接的一端可以视之为处理WebSocket消息的接口。Java 中可以通过两种方式定义Endpoint
编程式通过继承 javax.websocket.Endpoint并实现其方法。注解式通过添加 ServerEndpoint 等相关注解。
Endpoint 实例在 WebSocket 握手时创建并在客户端与服务端连接过程中有效在连接关闭时结束在Endpoint接口中就定义了其生命周期的相关方法
方法注解描述onOpenOnOpen注解所标识的方法连接建立时触发onErrorOnError注解所标识的方法通信发生错误时触发onCloseOnClose注解所标识的方法连接关闭时触发
在 onOpen 方法中将创建一个 Session 对象表示当前 WebSocket 连接的会话Session对象提供了一组方法用于管理WebSocket连接和事件。例如
服务端向客户端发送数据 如果使用编程式的话可以通过 Session 添加 MessageHandler 消息处理器来接收消息如果采用注解式可以在定义的 Endpoint 类中添加 OnMessage 注解指定接收消息的方法。 服务端将数据推送给客户端 在 Session 中维护了一个 RemoteEndpoint 实例用来向客户端推送数据我们可以通过 Session.getBasicRemote 获取同步消息发送实例通过 Session.getAsyncRemote 获取异步消息发送实例然后调用实例中的 sendXXX() 方法即可发送消息。 四、使用 webSocket 实现在线聊天室
上面说了那么多理论知识主要是为了让大家对Websocket有个最基本的认识下面就通过一个具体的场景《在线聊天室》来体会一下 Websocket 在实际中如何使用。
1、需求分析
这里我们实现的聊天室是比较简单的主要功能就是能够实现实时消息的发送和接收能够实时显示用户在线状态和在线人数。下面简单演示一下成品效果 2、实现流程 3、消息格式
这里约定前后端的消息数据格式采用 json 格式进行传输。主要分为两大类消息
客户端–服务器
{toName:张三,message:你好}服务器–客户端
{isSystem:true,fromName:null,message:[张三,李四] }
{isSystem:false,fromName:张三,message:你好 }4、服务端功能实现
这部分我会详细介绍一下使用 websocket后端如何进行api编写至于登录功能可以说是千篇一律这里直接给出代码不作为重点也就不在展开介绍了。
1导入依赖 首先我们需要创建 SpringBoot 项目并导入 websocket 相关依赖
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependency2登录模块实现 登录功能不是本次实现的重点所以这里只是对密码进行了一个简单的校验不涉及到数据库交互操作。
RestController
RequestMapping(/user)
public class UserController {/*** 登录* param user 提交的用户名和密码* param httpSession 提交的* return 成功信息*/PostMapping(/login)public Result login(User user, HttpSession httpSession) {if (user ! null (user.getPassword()).equals(123)) {// 将用户数据存储到session中httpSession.setAttribute(user,user.getUsername());System.out.println(httpSession);return Result.success(登录成功);} else {return Result.failed();}}/*** 获取当前登录的用户名* return 用户名*/GetMapping(/getusername)public Result login(HttpSession httpSession) {String username (String) httpSession.getAttribute(user);return Result.success(username);}}3聊天室功能实现
Component
ServerEndpoint(value /chat,configurator GetHttpSessionConfigurator.class)
public class ChatEndpoint {// 用来存储每一个客户端对象对应的ChatEndpoint对象private static ConcurrentHashMapString,ChatEndpoint onlineClient new ConcurrentHashMap();// 声明session对象通过该对象可以发生消息给指定的客户端private Session session;// 声明Httpsession对象里面记录了用户相关信息private HttpSession httpSession;/*** 连接建立时调用* param session 当前连接的会话* param config Endpoint的配置对象*/OnOpenpublic void onOpen(Session session,EndpointConfig config) {try {// 初始化当前Endpoint的链接会话this.session session;// 初始化httpSessionHttpSession httpSession (HttpSession) config.getUserProperties().get(HttpSession.class.getName());this.httpSession httpSession;// 将当前连接的ChatEndpoint对象存储到onlineClient容器中String username (String) httpSession.getAttribute(user);onlineClient.put(username,this);// 将在线用户推送给所有客户端// 1.获取消息String message MessageUtils.getMessage(true, null, getNames());// 2.将消息广播给所有用户broadcastAllUsers(message);} catch (Exception e) {e.printStackTrace();}}private void broadcastAllUsers(String message) {SetString names getNames();try {for (String name : names) {// 获取当前用户的ChatEndpoint对象ChatEndpoint client onlineClient.get(name);// 使用session发送信息client.session.getBasicRemote().sendText(message);}} catch (Exception e) {e.printStackTrace();}}private SetString getNames() {return onlineClient.keySet();}/*** 接收到客户端数据后调用* param message 消息信息* param session 当前连接的会话*/OnMessagepublic void onMessage(String message,Session session) {try {// 导入jackson核心类ObjectMapper objectMapper new ObjectMapper();// 将JSON字符串序列化为Message对象Message mess objectMapper.readValue(message, Message.class);// 取出接收人String toName mess.getToName();// 取出信息String sendMess mess.getMessage();// 找到发送人姓名String fromName (String) httpSession.getAttribute(user);// 进行消息构造String finalMess MessageUtils.getMessage(false, fromName, sendMess);// 根据接收人找到对应的连接ChatEndpoint chatEndpoint onlineClient.get(toName);if (chatEndpoint null) {// 这里可以抛出异常// ...// 打印日志System.out.println(找不到对应的客户端userName toName);return;}// 使用对应的会话Session发送给对应的客户端chatEndpoint.session.getBasicRemote().sendText(finalMess);} catch (Exception e) {e.printStackTrace();}}/*** 连接过程中发生错误时调用*/OnErrorpublic void onError(Session session, Throwable error) {System.out.println(websocket连接出错错误原因:error.getMessage());}/*** 关闭连接时调用*/OnClosepublic void onClose(Session session) {try {// 1.清除容器中的该ChatEndpoint对象String username (String) httpSession.getAttribute(user);onlineClient.remove(username);// 2.向所有客户端广播下线通知SetString names getNames();// 3.构造消息String message MessageUtils.getMessage(true,null,getNames());// 4.广播给其他用户broadcastAllUsers(message);} catch (Exception e) {e.printStackTrace();}}
}
需要注意的是
事实上当Component注解和ServerEndpoint(“/chat”)注解同时使用时Spring并不会将ChatEndpoint这个类注册为服务器的端点我们还需要需要注册一个 ServerEndpointExporter bean它会自动扫描带有ServerEndpoint注解的类并将其注册为WebSocket端点以便客户端可以连接和通信
Configuration
public class WebSocketConfig {Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}在WebSocket中每次客户端与服务器建立连接时都会创建一个新的ChatEndpoint实例来处理该连接。因此每个WebSocket连接都有其自己的ChatEndpoint实例this指向的是当前连接对应的实例所以在ChatEndpoint类中使用了一个static类型的集合将所有的连接记录起来便于之后的消息处理。 在客户端与服务端建立连接时上述的静态集合中是以 键-值 方式存储每个客户端的ChatEndpoint实例的为了区分这里以登录的用户名作为键所以需要获取到HttpSession再从Httpsession中获取到用户名但是在OnOpen方法中无法直接获取当前登录的 Httpsession此时我们可以借助OnOpen中的另一个参数 EndpointConfig config将Httpsession存储到EndpointConfig对象中在从EndpointConfig对象中获取到Httpsession因此我们需要进行如下配置
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {Overridepublic void modifyHandshake(ServerEndpointConfig sec,HandshakeRequest request, HandshakeResponse response) {// 获取到httpSessionHttpSession httpSession (HttpSession) request.getHttpSession();// 将httpSession存储到EndpointConfig中sec.getUserProperties().put(HttpSession.class.getName(),httpSession);}
}5、客户端交互功能实现
客户端这里主要介绍一下前后端交互的逻辑具体页面实现我们暂时不关心。 1登录页面前后端交互 登录页面的前后端交互主要采用 jQuery 发送 Ajax 请求完成整体思路很简单这里给出 js 代码
scriptfunction login(){// 1.参数校验var username jQuery(#username);var password jQuery(#password);if (username.val().trim() ) {username.focus();alert(请输入用户名!)return false;}if (password.val().trim() ) {username.focus();alert(请输入密码!);return false;}// 2.将参数提交给后端jQuery.ajax({url:/user/login,type:POST,data:{username:username.val().trim(),password:password.val().trim()},success:function(res) {console.log(res);// 3.将结果返回给用户if (res.flag) {// 登录成功!// alert(登录成功!);// 跳转到主页location.hrefmain.html;} else {// 登录失败!alert(登录失败用户名或密码错误);}}});}
/script2聊天页面的前后端交互 在聊天页面这里使用到 vue 进行处理可能理解起来稍微有点复杂大家可以自行参考
body
div classabs cover contaniner idappdiv classabs cover pnldiv classtop pnl-head stylepadding: 20px ; color: white;div iduserName用户{{username}}span stylefloat: right;color: green v-ifisOnline在线/spanspan stylefloat: right;color: red v-else离线/span/divdiv idchatMes v-showchatMes styletext-align: center;color: #6fbdf3;font-family: 新宋体正在和 font face楷体{{toName}}/font 聊天/div/div!--聊天区开始--div classabs cover pnl-body idpnlBodydiv classabs cover pnl-left idinitBackground stylebackground-color: white; width: 100%div classabs cover pnl-left idchatArea v-showisShowChatdiv classabs cover pnl-msgs scroll idshowdiv classpnl-list idhists!-- 历史消息 --/divdiv classpnl-list idmsgs v-formessage in historyMessage!-- 消息这展示区域 --div classmsg guest v-ifmessage.toNamediv classmsg-rightdiv classmsg-host headDefault/divdiv classmsg-ball{{message.message}}/div/div/divdiv classmsg robot v-elsediv classmsg-left workerdiv classmsg-host photostylebackground-image: url(img/avatar/Member002.jpg)/divdiv classmsg-ball{{message.message}}/div/div/div/div/divdiv classabs bottom pnl-textdiv classabs cover pnl-inputtextarea classscroll idcontext_text keyup.entersubmit wraphard placeholder在此输入文字信息...v-modelsendMessage.message/textareadiv classabs atcom-pnl scroll hide idatcomPnlul classatcom idatcom/ul/div/divdiv classabs br pnl-btn idsubmit clicksubmitstylebackground-color: rgb(32, 196, 202); color: rgb(255, 255, 255);发送/divdiv classpnl-support idcopyrighta hrefhttps://blog.csdn.net/LEE180501?spm1000.2115.3001.5343仅供学习参考/a/div/div/div!--聊天区 结束--div classabs right pnl-rightdiv classslider-container hide/divdiv classpnl-right-contentdiv classpnl-tabsdiv classtab-btn active idhot-tab好友列表/div/divdiv classpnl-hotul classrel-list unselectli classrel-item v-forfriend in friendsLista clickshowChat(friend){{friend}}/a/li/ul/div/divdiv classpnl-right-contentdiv classpnl-tabsdiv classtab-btn active系统广播/div/divdiv classpnl-hotul classrel-list unselect idbroadcastListli classrel-item stylecolor: #9d9d9d;font-family: 宋体 v-forname in systemMessages您的好友{{name}} 已上线/li/ul/div/div/div/div/div/div
/div
script srcjs/vue.js/script
script srcjs/axios-0.18.0.js/script
scriptlet ws;new Vue({el: #app,data() {return {isShowChat: false,chatMes: false,isOnline: true,username:,toName: ,sendMessage: {toName: ,message: },inputMessage: ,historyMessage: [],friendsList: [],systemMessages : []}},created() {this.init();},methods: {async init() {await axios.get(user/getusername).then(res {this.username res.data.message;});//创建webSocket对象ws new WebSocket(ws://127.0.0.1:8080/chat);//给ws绑定事件ws.onopen this.onopen;//接收到服务端推送的消息后触发ws.onmessage this.onMessage;ws.onclose this.onClose;},showChat(name) {this.toName name;//清除聊天区的数据let history sessionStorage.getItem(this.toName);if (!history) {this.historyMessage [];} else {this.historyMessage JSON.parse(history);}//展示聊天对话框this.isShowChat true;//显示“正在和谁聊天”this.chatMes true;},submit() {this.sendMessage.toName this.toName;this.historyMessage.push(JSON.parse(JSON.stringify(this.sendMessage)));sessionStorage.setItem(this.toName, JSON.stringify(this.historyMessage));ws.send(JSON.stringify(this.sendMessage));this.sendMessage.message ;},onOpen() {this.isOnline true;},onClose() {sessionStorage.clear();this.isOnline false;},onMessage(evt) {//获取服务端推送过来的消息var dataStr evt.data;//将dataStr 转换为json对象var res JSON.parse(dataStr);//判断是否是系统消息if(res.system) {//系统消息 好友列表展示var names res.message;this.friendsList [];this.systemMessages [];for (let i 0; i names.length; i) {if(names[i] ! this.username) {this.friendsList.push(names[i]);this.systemMessages.push(names[i]);}}}else {//非系统消息var history sessionStorage.getItem(res.fromName);if (res.fromName this.toName) {if (!history) {this.historyMessage [res];} else {this.historyMessage.push(res);}sessionStorage.setItem(res.fromName, JSON.stringify(this.historyMessage));} else {if (!history) {sessionStorage.setItem(res.fromName, JSON.stringify([res]));} else {let messages JSON.parse(history);messages.push(res);sessionStorage.setItem(res.fromName, JSON.stringify(messages));}}}}}});
/script6、聊天室完整资源
完整资源请点击 Gitee 在线聊天室
