投稿 评论 顶部
只分享精品资源,希望小站能够帮助到大家!

方案优化:网站实现扫描二维码存眷微信公家号

寻宝分享网 SEO教程

   1,微信的体系,提供天生带参数的二维码的接口,这个参数就是独一值(场景值)
   2,网站挪用微信体系,获取天生的二维码图片
   3,用户扫码会直接挪用微信处事器,将用户会见微信处事器的信息记录到redis,key就是独一值(场景值)
   4,网站端做轮训去查询redis中是否有这个独一值的数据,假若有就获取用户信息登录,没有就五秒一次轮训,登录后就不在做轮训(从二维码弹出之后开始做轮训,封锁二维码后遏制轮训)

   5,这里的独一值是可以本身界说的,我用的是截取了几位的时刻戳 

上述方案中,实现的难点在于微信处事器不能主动与网站举办通讯,以是回收了网页端的轮训去做举办用户状态的查询,可是方案中4,网站端行使轮训去全局的redis缓存中查找用户信息,这样行使轮训无疑就会发生跟多的无用http哀求,不只增进了处事器的压力还挥霍资源。

优化方案

   简化一下必要完成上述成果的实现要点:

    客户端(网站)与处事端(微信)的通讯,而且必要处事器可以主动的推送动静到客户端(网站)

  要是实现客户端与处事器端的通讯这个成果,常用的方法有两种:

  1,轮训(也就是前次方案中行使的要领)

  2,长毗连

 我行使的是操作websocket与处事器举办通讯,并且websocket行使起来也很是利便,易上手

 优化后的方案:

   1,微信的体系,提供天生带参数的二维码的接口,这个参数就是独一值(场景值)
   2,网站挪用微信体系,获取天生的二维码图片
   3,用户扫码会直接挪用微信处事器,然后将获取到的用户信息操作websocket发送给网站端
   4,网站接管信息,并表现登岸

 

实现步调

  1,起首打开一个页面起首必要与处事器端成立一个socket链接,要想每个页面与处事器端都成立一个链接,每个页面都必要一个独一标识,这里我用的时刻戳

  行使websocket成立一个毗连很轻易,代码如下

    

var timestamp = new Date().getTime() + "";timestamp = timestamp.substring(0, timestamp.length-3);var websocket = null;//判定当前赏识器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://xxxx/wx/websocket/"+timestamp);}else {alert('当前赏识器 Not support websocket');}//毗连产生错误的回调要领websocket.onerror = function () {console.log("WebSocket毗连产生错误");};//毗连乐成成立的回调要领websocket.onopen = function () {console.log("WebSocket毗连乐成");}//吸取到动静的回调要领websocket.onmessage = function (event) {jQuery("#username").html(event.data);jQuery("#singup").css("display", "none");jQuery("#user").show();jQuery("#singout").show();layer.closeAll();}//毗连封锁的回调要领websocket.onclose = function () {console.log("WebSocket毗连封锁");}//监听窗口封锁变乱,当窗口封锁时,主动去封锁websocket毗连,防备毗连还没断开就封锁窗口,server端会抛非常。window.onbeforeunload = function () {closeWebSocket();}//封锁WebSocket毗连 function closeWebSocket() {websocket.close();}

  2,处事器端socket的成立,在成立socket链接的时辰,将每个页面传过来的独一标识{sceneId}与会话信息session举办绑定,可以行使map实现,这里用的ConcurrentMap

/** * @ServerEndpoint 注解是一个类条理的注解,它的成果首要是将今朝的类界说成一个websocket处事器端, * 注解的值将被用于监听用户毗连的终端会见URL地点,客户端可以通过这个URL来毗连到WebSocket处事器端 */@Component@ServerEndpoint("/websocket/{sceneId}")public class WebSocketController {//静态变量,用来记录当前在线毗连数。应该把它计划成线程安详的。private static int onlineCount = 0;//concurrent包的线程安详Set,用来存放每个客户端对应的MyWebSocket工具。若要实现处事端与单一客户端通讯的话,可以行使Map来存放,个中Key可觉得用户标识//private static CopyOnWriteArraySet<WebSocketController> webSocketSet = new CopyOnWriteArraySet<WebSocketController>();private static ConcurrentMap<String,WebSocketController> webSocketMap = new ConcurrentHashMap<String,WebSocketController>();//与某个客户端的毗连会话,必要通过它来给客户端发送数据private Session session;/*** 毗连成立乐成挪用的要领* @param session 可选的参数。session为与某个客户端的毗连会话,必要通过它来给客户端发送数据*/@OnOpenpublic void onOpen(@PathParam("sceneId") String sceneId,Session session){this.session = session;webSocketMap.put(sceneId, this);//在线数加1System.out.println("独一key为:" + sceneId);}/*** 毗连封锁挪用的要领*/@OnClosepublic void onClose(@PathParam("sceneId") String sceneId){webSocketMap.remove(sceneId);//从map中删除 }/*** 收到客户端动静后挪用的要领* @param message 客户端发送过来的动静* @param session 可选的参数*/@OnMessagepublic void onMessage(String message,Session session) {System.out.println("来自客户端的动静:" + message);JSONObject jsonobject = JSONObject.fromObject(message);Hashtable params= (Hashtable)JSONObject.toBean(jsonobject,Hashtable.class);//群动员静WebSocketController webSocketController = webSocketMap.get(params.get("equipmentType"));try {webSocketController.sendMessage((String)params.get("nickname"));} catch (IOException e) {e.printStackTrace();}}/*** 产生错误时挪用* @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error){System.out.println("产生错误");error.printStackTrace();}/*** 这个要领与上面几个要领纷歧样。没有效注解,是按照本身必要添加的要领。* @param message* @throws IOException*/public void sendMessage(String message) throws IOException{this.session.getBasicRemote().sendText(message);//this.session.getAsyncRemote().sendText(message);}

3,微信端获取到用户信息后,挪用socket,通过传过来的sceneId去map中获取session,之后将用户信息发送到网站