简单网页版在线聊天系统(即时在线聊天)_科学探索网
主页 > 科学探索 >

简单网页版在线聊天系统(即时在线聊天)

科学探索 2023-05-01 12:38www.bnfh.cn科学探索

　　简单网页版在线聊天系统(即时在线聊天)、本站经过数据分析整理出简单网页版在线聊天系统(即时在线聊天)相关信息，仅供参考！

　　前言什么是Webscoket？Websocket应用场景短版群聊实现代码示例WebscoketWebsokcet是一种在单一TCP连接上进行全双工通信的协议，通过HTTP/1.1协议的101状态码进行握手。

　　 http://ebsocket.

　　 Websocket应用场景Websocket和http协议都是eb通信协议。两者有什么区别？让我们从Http开始，它是一种请求-响应协议。这种模式决定了只有客户端可以请求，服务器可以被动应答。如果我们有服务器主动推送给客户端的需求呢？比如一个股票网站，我们会选择主动轮询，也就是“拉模式”。

　　可以想想主动轮询带来的问题。

　　主动轮询实际上会产生大量无效请求，增加服务器的压力。

　　所以ebsocket协议的补充给我们带来了新的解决方案。

　　简单群聊通过Websocket实现了一个简单的群聊功能，加深了对Websocket的理解。

　　假设李雷和韩梅梅都在线登录；李磊通过浏览器向Ws服务器发送nginx代理的消息；Ws服务器加载所有联机会话广播消息；韩梅梅收到了这个消息。

　　闲谈

　　后端示例(商店服务器)

　　 pom.xml依赖关系简介

　　依赖性groupId.springframeork.boot/groupId工件Spring-Boot-Starter-eb socket/工件ID/依赖性配置类

　　打包 . only thinking . shop . eb socket；导入lombok . extern . SLF 4j . SLF 4j；导入 . spring frameork . context . annotation . bean；导入 . spring frameork . context . annotation . configuration；import . spring frameork . eb . socket . server . standard . servendpointexporter；/ p The describe/p @作者李兴平/@ Slf4j @ configuration public class WebSocketConfiguration { @ Bean public ServerEndpointExporter endpointExporter(){ return ne ServerEndpointExporter()；}}接受请求端点

　　打包。只是思考。购物。eb套接字；导入。阿里巴巴。快速JSON。JSON导入。谷歌。常见。收藏。地图；导入。只是思考。购物。eb套接字。处理程序。chathandler导入。只是思考。购物。eb套接字。处理程序。kfshandler导入。只是思考。购物。eb套接字。处理程序。s处理程序；导入。只是思考。购物。eb套接字。商店。sreq负载；导入。只是思考。购物。eb套接字。商店。sresp负载；导入。只是思考。购物。eb套接字。商店。s商店；导入。只是思考。购物。eb套接字。商店。s用户；导入龙目岛。外部人员。SLF 4j。SLF 4j；导入。阿帕奇。公地。郎3。字符串实用程序；导入。spring框架。刻板印象。组件；导入javax。eb套接字。;导入javax。eb套接字。服务器。服务器端点；导入Java。io。io异常；导入Java。util。地图；/ p The describe/p @作者李兴平/@ Slf4j @ Component @服务器终结点(/s )公共类WebsocketServerEndpoint { private static MapString，s handler s handler=maps。neconcurrentmap()；static { sHandler.put(robot ，ne KfWsHandler())；sHandler.put(chat ，ne chathandler())；} @ on open public void on open(session session){ log。信息(“新s连接{ }”)，会话。getid())；WsStore.put(session.getId()，WsUser.builder().id(session.getId()).会话（会话)。build())；respMsg(session，WsRespPayLoad.ok().toJson())；} @ on close public void on close(Session会话，关闭原因关闭原因){ s store。移除(会话。getid())；log.arn(s关闭，原因{} ，关闭原因)；} @ on message public void on message(字符串消息，会话session) { log.info(接受客户端消息{} 消息);sreq payLoad payLoad=JSON。解析对象(消息，sreq负载。类)；if(字符串实用程序。空白(有效负载。gettype()){ resp msg(session，WsRespPayLoad.ofError(Type为空值。).toJson())；返回；} s user s user=s store。获取(会话。getid())；if(null==s user

　　

　　 string utils。为空(s用户。获取用户名()){ s存储。put(会话。getid()、WsUser.builder()).id(session.getId()).用户名(payLoad.getUsername()).头像(payLoad.getAvatar()).会话（会话)。build())；} s处理程序handler=s处理程序。获取(有效载荷。gettype())；if (null！=handler){ sresp有效负载resp=handler。在消息上(会话，有效负载)；if (null！=resp) { respMsg(会话，响应。tojson())；} } else { respMsg(session，WsRespPayLoad.ok().toJson())；} } @ on error public void on error(Session Session，Throable e){ s store。移除(会话。getid())；log.error(WS Error:，e)；} private void respMsg(Session Session，String content){ try { Session。getbasicremote().发送文本(内容);} catch(io异常e){ log。错误( Ws resp msg error { } { } ，内容，e)；} }}聊天业务处理器

　　打包。只是思考。购物。eb套接字。处理者；导入。只是思考。购物。eb套接字。商店。;导入龙目岛。外部人员。SLF 4j。SLF 4j；导入javax。eb套接字。会话；导入Java。util。日期；导入Java。util。列表；/ p The describe/p @作者李兴平/@ SLF 4j公开课chathandler实现s处理程序{ @覆盖消息上的公共sresp负载(会话Session，WsReqPayLoad负载){ //广播消息列出suser所有会话=s store。get all()；for(s用户所有会话){ sresp有效负载resp=sresp有效负载。构建器().数据(WsChatResp.builder().用户名(payLoad.getUsername()).头像(payLoad.getAvatar()).msg(payLoad.getData()).创建时间(新日期())。self(s.getId().equals(session.getId()).build()).build()；log.info(广播消息{} {} ，s.getId()，s . get username())；getSession().getAsyncRemote().发送文本(resp。tojson())；}返回null}}前端（商店网络管理)

　　引入依赖

　　新公共管理安装vue-native-ebsocket -保存添加商店

　　从“Vue”导入Vue const s={ state:{ s data:{ hasNeMsg:false，}，socket: { isConnected: false，message: ，reconnectError: false，}，mutations: { SET_WSDATA(state，data){ state。s数据。hasNeMsg=data。hasNeMsg }，RESET_WSDATA(state，data){ state。s数据。hasNeMsg=false }，SOCKET_ONOPEN(state，event){ Vue。原型。$ SOCKET=eventstate.socket.isConnected=true }，SOCKET_ONCLOSE(state，event){ state。插座。is connected=false }，SOCKET_ONERROR(state，event) { console.error(state，event) }，//为所有方法调用的默认处理程序SOCKET_ONMESSAGE(状态，消息){状态。插座。message=message }，//重新连接方法的突变SOCKET_RECONNECT(state，count) { console.info(state，count) }，SOCKET _ RECONNECT _ ERROR(state){ state。插座。重新连接错误=真；}，}，actions:{ Ask robot({ root getters }，data){ return ne Promise((resolve，reject)={ console。log(问机器人消息，数据)；常量有效负载={ type: robot ，用户名rootGetters.loginName，data:data }；vue。原型。$ socket。Send obj(payLoad)resolve(1)} }，SendChatMsg({rootGetters}，data){ return ne Promise((resolve，reject)={ console。日志(发送聊天消息，数据)；常量有效负载={ type: chat ，用户名rootGetters.loginName，data:data }；vue。原型。$ socket。send obj(payLoad)resolve(1)})}，MessageRead({mit，state}，data) { mit(RESET_WSDATA ，{}) }，} }；导出默认《华盛顿明星报》编写组件

　　模板div ot-抽屉标题=聊天可见。sync= chat visible direction= RTL :before-close= handle close div class= chat-body div id= msg list style= margin-bottom:200 px class= chat-msg div class= chat-msg-item v-for= item in msg list div-if=！项目。self div class= msg-header img:src= base URL /API/unsecured/avatar？代码= item。avatar size=64 class= user-avatar span class= avatar-name { item。username } }/span div style= display:inline-block；float:right“{ item。创建时间

　　分析时间( { h }:{ I } )} }/div/div class= msg-body style= float:left；{{item.msg}} /div /divNginx代理配置nginx.conf(如有需要可添加)

　　 maphttp _ upgradeconnection _ upgrade {默认升级；关闭；}上游eb套接字{服务器127。0 .0 .1:8300;}服务器{服务器名shop-eb-mgt.onlythinking.；监听443 ssllocation/{ proxy _ pass http://eb socket；proxy _ read _ time out 300s proxy _ send _ time out 300s proxy _ set _ header Host $ Host proxy _ set _ header X-Real-IP $ remote _ addr；proxy _ set _ header X-Forarded-For $ proxy _ add _ X _ Forarded _ For；proxy _ http _ version 1.1 proxy _ set _ header Upgrade $ http _ Upgrade；代理集标题连接$ connection _ upgrade } SSL _ certificate/etc/data/shop-e b-mgt。只是思考。/full。PEMSSL _ certificate _ key/etc/data/shop-e B- mgt。只是思考。/privkey。PEM}实现效果图

　　界面比较丑，因为不太擅长，请大家别见笑！

　　聊天界面

　　聊天界面

　　聊天界面

　　聊天界面

　　项目地址

　　 https://github . /cuteJ/shop-server(后端)

　　 https://github . /cuteJ/shop-e b-mgt(前端)

　　项目演示地址

　　 http://shop-eb-mgt.onlythinking.

　　小结该篇学习Websocket，写此演示加深印象！

　　更多关于简单网页版在线聊天系统(即时在线聊天)的请关注本站。

上一篇：河南中联水泥厂有多少家(河南中联水泥集团有限 下一篇：家族群名称大全(别致的家族群名)

探索宇宙

Copyright © 2016-2025 www.bnfh.cn 怪异网 版权所有 Power by