web 端 与 android h5 端 界面同屏（同步效果）设计方案

web 端 与 android h5 端 界面同屏（同步效果）设计方案

看到这个标题是不是 很新鲜呀？好牛！哈哈 其实说说它的原理大家就觉得没啥稀奇的了！这个案例是本人设计的，现在分享给大家。如果有什么更好的方案，或者什么 想法可以一起讨论！好的废话补多少上才艺。

1. 首先大家需要具备的东西，js ,css ，jquery, webSocket 网络协议，java 这些是案例所具备的必备技能。至少这是此案例所涉及的东西。
2. 了解android h5 是咋个回事！这个案例使用了apiCloud ,这个东西放你封装webScoket 方便了很多
3. 自己需要搭建webSocket ，很废话的样子！自己搭建websocket 方便自己定义 发送msg 的数据逻辑，如果逻辑不可控，就谈不上开发功能。
4. 上逻辑
   websocket 是基于http/tcp 请求的场链接协议，如果提及websocket 好多人都知道这是用在聊天室功能！与http/tcp 区别在于不用每次建立连接，建立一次只要不销毁界面对象，它一直都会连接，而且可以主动向客户端发送内容，但前提是要触发一下。这个东西我不在这个地方做阐述。请参考 链接: https://zhuanlan.zhihu.com/p/160910342
   上场景
   a 端触发操作 希望看到 b 端 界面也同样触发了相同操作 如图

如果android h5 触发1号按钮 ，在 web端 也应该 看到 1号按钮自己开了，同样 web 端触发 1号按钮那么 android 端也应还 自动开启 1号按钮 。当然其他操作雷同效果！

问题1 webSocket 如何知道哪两个页面互通消息 ？
解答 看设计方案： web端 webSocket连接地址后缀 是 系统window+随机数+关键字sf+设施id
android 端websocket 连接地址后缀是 系统android+随机数+关键字sf+设施id
websocket 连接后缀 有关键字要保持一致 设施id 保持一致。大家都知道websocket 是以广播形式发送消息个各个客户端的。怎么可以可以知道这两个是一个设备界面呢！连接时 后缀关键字和id 一致的他们属于一个设备界面，需要同步屏幕效果！每个连接进入websocket 时 用后缀存储为key 此链接为 值创建 map 的session 连接池。 发送消息时 可以发送json 字符串

先看java websocket 代码

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * websocktService 核心类
 */

@ServerEndpoint("/webSocket/{sid}")
@Component
public class WebSocketService {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static AtomicInteger onlineNum = new AtomicInteger();

    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
    private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();

    public static Map<String, Object> viewData;

    //发送消息
    public void sendMessage(Session session, String message) throws IOException {
        if (session != null) {
            synchronized (session) {
                System.out.println("发送数据：" + message);
                session.getBasicRemote().sendText(message);
            }
        }
    }

    //给指定用户发送信息
    public void sendInfo(String userName, String message) {
        Session session = sessionPools.get(userName);
        try {
            sendMessage(session, message);
        } catch (Exception e) {
            e.printStackTrace();