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

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

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

　　 http://websocket.org

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

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

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

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

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

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

　　闲谈

　　后端示例(商店服务器)

　　 pom.xml依赖关系简介

　　依赖性groupIdorg.springframework.boot/groupId工件Spring-Boot-Starter-web socket/工件ID/依赖性配置类

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

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

　　

　　 string utils。为空(ws用户。获取用户名()){ ws存储。put(会话。getid()、WsUser.builder()).id(session.getId()).用户名(payLoad.getUsername()).头像(payLoad.getAvatar()).会话（会话)。build())；} ws处理程序handler=ws处理程序。获取(有效载荷。gettype())；if (null！=handler){ wsresp有效负载resp=handler。在消息上(会话，有效负载)；if (null！=resp) { respMsg(会话，响应。tojson())；} } else { respMsg(session，WsRespPayLoad.ok().toJson())；} } @ on error public void on error(Session Session，Throwable e){ ws 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)；} }}聊天业务处理器

　　打包com。只是思考。购物。web套接字。处理者；导入com。只是思考。购物。web套接字。商店。*;导入龙目岛。外部人员。SLF 4j。SLF 4j；导入javax。web套接字。会话；导入Java。util。日期；导入Java。util。列表；/* * * p The describe/p * * @作者李兴平*/@ SLF 4j公开课chatwhandler实现ws处理程序{ @覆盖消息上的公共wsresp负载(会话Session，WsReqPayLoad负载){ //广播消息列出wsuser所有会话=ws store。get all()；for(ws用户：所有会话){ wsresp有效负载resp=wsresp有效负载。构建器().数据(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-websocket -保存添加商店

　　从“Vue”导入Vue const ws={ state:{ ws data:{ hasNewMsg:false，}，socket: { isConnected: false，message: ，reconnectError: false，}，mutations: { SET_WSDATA(state，data){ state。ws数据。hasNewMsg=data。hasNewMsg }，RESET_WSDATA(state，data){ state。ws数据。hasNewMsg=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 new Promise((resolve，reject)={ console。log(问机器人消息，数据)；常量有效负载={ type: robot ，用户名：rootGetters.loginName，data:data }；vue。原型。$ socket。Send obj(payLoad)resolve(1)} }，SendChatMsg({rootGetters}，data){ return new Promise((resolve，reject)={ console。日志(发送聊天消息，数据)；常量有效负载={ type: chat ，用户名：rootGetters.loginName，data:data }；vue。原型。$ socket。send obj(payLoad)resolve(1)})}，MessageRead({commit，state}，data) { commit(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 {默认升级；关闭；}上游web套接字{服务器127。0 .0 .1:8300;}服务器{服务器名shop-web-mgt.onlythinking.com；监听443 ssllocation/{ proxy _ pass http://web 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-Forwarded-For $ proxy _ add _ X _ Forwarded _ For；proxy _ http _ version 1.1 proxy _ set _ header Upgrade $ http _ Upgrade；代理集标题连接$ connection _ upgrade } SSL _ certificate/etc/data/shop-we b-mgt。只是思考。com/full。PEMSSL _ certificate _ key/etc/data/shop-we B- mgt。只是思考。com/privkey。PEM}实现效果图

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

　　聊天界面

　　聊天界面

　　聊天界面

　　聊天界面

　　项目地址

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

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

　　项目演示地址

　　 http://shop-web-mgt.onlythinking.com

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

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