简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

Web端

主要是js完成，直接上代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>websocket</title><style>.sss {width: 15px;height: 15px;color: #fff;float: right;margin-right: -5px;margin-top: -3px;background-color: #f00;border-radius: 50%;}</style>
</head>
<script>var username = window.parent.document.getElementById('i_name').innerTextvar socket;function openSocket() {if(typeof(WebSocket) == "undefined") {console.log("您的浏览器不支持WebSocket");}else{console.log("您的浏览器支持WebSocket");//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接var socketUrl="http://192.168.0.107:8888/imserver/"+username;socketUrl=socketUrl.replace("https","ws").replace("http","ws");console.log(socketUrl);if(socket!=null){socket.close();socket=null;}socket = new WebSocket(socketUrl);//打开事件socket.onopen = function() {console.log("websocket已打开");};//获得消息事件socket.onmessage = function(msg) {console.log(msg.data);updateState(msg.data);};//关闭事件socket.onclose = function() {console.log("websocket已关闭");};//发生了错误事件socket.onerror = function() {console.log("websocket发生了错误");}}}// 发送消息function sendMessage() {if(typeof(WebSocket) == "undefined") {console.log("您的浏览器不支持WebSocket");}else {console.log("您的浏览器支持WebSocket");socket.send('你好WebSocket...');}}// 将消息显示在网页上function updateState(str) {if(str== "1"){document.getElementById("red_dot").style.visibility="visible";//显示}else{document.getElementById("red_dot").style.visibility="hidden";//隐藏}}if(username != null && username != "" && username.length > 0){openSocket();}</script>
<body style="text-align:center;">
<div id="red_dot" class="sss" style="visibility: hidden;"></div>
</body>
</html>

首先检查浏览器是否支持。目前大部分浏览器都已支持。
第一步，拿到父页用户登录名称作为与服务端连接的用户id。
第二步，连接服务端和一系列的监听事件。
第三步，通过不同的事件以及不同的数据对页面相应的操作。

解释：我的需求比较简单，主要是后台提醒作用，后台推送1，前台显示红点提醒，推送为其他则隐藏红点。
如果语法错误需要安装express和socket.io库

父页面代码：

<i id="i_name" hidden="hidden">{{user.username}}</i>
<iframe id="topFrame" src="im_client.html" width="18px" height="32px" scrolling="No" noresize="noresize" frameborder="0"></iframe>

服务端

项目环境是 springboot + Maven + WebSocket。话不多说，看代码

pom.xml 添加依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

开启WebSocket支持

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** 开启WebSocket支持*/
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

创建服务

import java.io.IOException;
import java.util.Collection;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import org.springframework.stereotype.Component;
import cn.hutool.log.Log;
import cn.hutool.log.LogFactory;@ServerEndpoint("/imserver/{userId}")
@Component
public class WebSocketServer {static Log log=LogFactory.get(WebSocketServer.class);/**静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/private static int onlineCount = 0;/**concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。*/private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();/**与某个客户端的连接会话，需要通过它来给客户端发送数据*/private Session session;/**接收userId*/private String userId="";/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session,@PathParam("userId") String userId) {System.out.println("userId:"+userId + " , session:"+session);this.session = session;this.userId=userId;if(webSocketMap.containsKey(userId)){webSocketMap.remove(userId);webSocketMap.put(userId,this);//加入set中}else{//加入set中webSocketMap.put(userId,this);//在线数加1addOnlineCount();}log.info("用户连接:"+userId+",当前在线人数为:" + getOnlineCount());//        try {
//            sendMessage("连接成功");
//        } catch (IOException e) {
//            log.error("用户:"+userId+",网络异常!!!!!!");
//        }}/*** 实现服务器主动推送*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}/*** 连接关闭调用的方法*/@OnClosepublic void onClose() {if(webSocketMap.containsKey(userId)){webSocketMap.remove(userId);//从set中删除subOnlineCount();}log.info("用户退出:"+userId+",当前在线人数为:" + getOnlineCount());}/*** 接收客户端消息* @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, Session session) {log.info("用户消息:"+userId+",报文:"+message);}/*** @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error) {log.error("用户错误:"+this.userId+",原因:"+error.getMessage());error.printStackTrace();}/*** 发送自定义消息 群发* */public static void sendAllInfo(String message) {try{Collection<WebSocketServer> mCollection = webSocketMap.values();for (WebSocketServer mWebSocketServer:mCollection) {mWebSocketServer.sendMessage(message);}}catch (Exception e){e.getMessage();}}public static synchronized int getOnlineCount() {return onlineCount;}public static synchronized void addOnlineCount() {WebSocketServer.onlineCount++;}public static synchronized void subOnlineCount() {WebSocketServer.onlineCount--;}
}

静态方法类名点直接调用即可

WebSocketServer.sendAllInfo("0");

亲测可用

WebSocket开发web页面与服务实时通信相关推荐

Spring Boot 2.x基础教程：使用 Thymeleaf开发Web页面
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 翟永超来源 | http://blog.di ...
java 开发web页面跳转,javaweb页面跳转
java动态web页面,JavaWEB入门,javaweb页面跳转,javaweb页面登录他们之间的联系是什么 8 serverlet 的生命周期及各阶段的作用 9 java web两种跳转方式分别 ...
基于 Qt Quick+websocket 的Web扫描仪驱动开发
基于 Qt Quick+websocket 的Web扫描仪驱动开发核心需求在浏览器中点击扫描按钮,驱动扫描仪进行扫描,接收图片保存到ftp指定路径. 支持扫描仪参数设置出现异常时可重置恢复支持 ...
第六章 Web开发实战1——HTTP服务
此处我说的HTTP服务主要指如访问京东网站时我们看到的热门搜索.用户登录.实时价格.实时库存.服务支持.广告语等这种非Web页面,而是在Web页面中异步加载的相关数据.这些服务有个特点即访问量巨大.逻 ...
自开发Web应用和SAP Customer Data Cloud Identity服务的集成
今天的文章继续由SAP成都研究院的云时代女王,Aviva给大家分享关于SAP Customer Data Cloud的一些使用经验. Aviva之前的文章可以在本文末尾处获得. 下面是她的正文. 大家 ...
pb 打印html页面,用PB开发WEB应用
用PB开发WEB应用用PB开发WEB应用烟台教育学院网络中心孙连三一.PB Window plug -in 的用途 PowerBuilder Window plug -in 的用途是在HTML ...
websocket 发送图片_基于WebSocket的web端IM即时通讯应用的开发
基于WebSocket的web端IM即时通讯应用的开发功能列表: 1.Web端的IM即时通讯应用 2.支持上线.下线.实时在线提醒 3.单聊.群聊的建立 4.普通文字.表情.图片的传输(子定义富文本 ...
[Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端(续)
前言本篇是承接上一篇: [Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端在上一篇粗略地介绍了如何使用Top-Down的方式创建 ...
ctf web必备工具_设计人员和开发人员的必备Web工具和服务
ctf web必备工具 I cannot imagine that in 2018 there are people who don't use daily several web tools and ...

WebSocket开发web页面与服务实时通信

使用WebSocket完成web页面与服务实时通信

简介

Web端

服务端

pom.xml 添加依赖

开启WebSocket支持

创建服务

WebSocket开发web页面与服务实时通信相关推荐

最新文章

热门文章