两个页面之间互相通信

首先搭建express框架，然后通过two页面发送数据给服务器，服务器把数据传送给one页面

在two 中发送数据，在one中显示

  • router/index.js
var axios = require('axios');

router.get('/sse_server', (req, res) => {

  res.setHeader('Content-Type', 'text/event-stream');

  setInterval(function () {

    console.log(message);

    if (message.length > 0) {

      var msg = message.shift();

      res.write('data:' + msg + '\n\n');

    }

  }, 1000);

})

router.get('/one', (req, res) => {

  res.render('one');

})

router.get('/two', (req, res) => {

  res.render('two');

})

router.get('/ajax', (req, res) => {

  var content = req.query.content;

  message.push(content);

  res.end('ok');

})
  • one.ejs
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>新消息</title>

</head>

<body>

  <h1>接受到的消息</h1>

  <script>

    var source = new EventSource('/sse_server');

    var i = 0;

    var timer = null;

    source.onmessage = function(data){

      console.log(data.data);

      if(timer) return;

      timer = setInterval(function () {

        i++;

        if (i % 4 == 0) {

          document.title = '[　　　]接受消息';

        } else if (i % 4 == 1) {

          document.title = '[新　　]接受消息';

        } else if (i % 4 == 2) {

          document.title = '[新消　]接受消息';

        } else if (i % 4 == 3) {

          document.title = '[新消息]接受消息';

        }

      }, 500);

    }

    </script>

</body>

</html>
  • two.ejs
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <input type="text">

  <button>发送</button>

  <script>

    var btn = document.querySelector('button');

    btn.onclick = function(){

      var value = $('input').val();

      $.get('/ajax',{content:value},function(res){

        console.log(res);

      })

    }

  </script>

</body>

</html>

SSE两个页面的相互通信的更多相关文章

  1. localstorage实现两个页面通信，购物车原理。

    如:A,B页面,A为商品页,B为购物车页,两个页面同时打开,在A页面点击商品添加至购物车,切换到B页面购物车怎么显示该商品信息 利用localStroage,A页面将数据存入localStroage, ...

  2. NanUI文档 - 如何实现C#与Javascript的相互通信

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...

  3. iframe及与页面之间的通信

    获取iframe对象 iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它 代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级 ...

  4. wmware 怎么 跟主机相互通信

    VMnet1和VMware8其实就是软件模拟出来的两块网卡提供DHCP服务,两块网卡对应VMware的两种不同的模式VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转 ...

  5. 如何实现Windows Phone代码与Unity相互通信（事件方式）

    源地址:http://www.cnblogs.com/petto/p/3909063.html 一些废话 昨天写一篇今天写一篇.不是我闲的蛋疼,是今天一天碰到了好几个恼人的问题,浪费一天时间搞定.本文 ...

  6. 如何实现Windows Phone代码与Unity相互通信（直接调用）

    我之前用了两篇文章写了WP与Unity相互通信.调用的办法,一个是事件,一个是插件. 这次来说个更简单的,我觉得这应该是Unity发布到WP或者Win Store上得天独厚的优势.毕竟都是C#. 懒得 ...

  7. Android：手把手教你 实现Activity 与 Fragment 相互通信,发送字符串信息（含Demo）

    前言Activity 与 Fragment 的使用在Android开发中非常多今天,我将主要讲解 Activity 与 Fragment 如何进行通信,实际上是要解决两个问题: Activity 如何 ...

  8. js 页面间的通信

    看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...

  9. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

随机推荐

  1. device tree --- #address-cells and #size-cells property

    device tree source Example1 / { #address-cells = <0x1>; // 在 root node 下使用 1 個 u32 來代表 address ...

  2. spring mvc 自定义编辑器

    起始知识: Java标准的PropertyEditor的核心功能是将一个字符串转换为一个Java对象,以便根据界面的输入或配置文件中的配置字符串构造出一个JVM内部的java对象. 如何注册自定义的属 ...

  3. 使用Git Wiki 管理文档时，文档编写的基本用法

    自己初次接触GitLab,通过百度和自己查找资料,了解了一部分.在自己的工作中,主要用到GitLab的Wiki文档版本管理能力.我总结了一小部分文本编辑需要用到的东西. 一.文本的排版 为了让文本/文 ...

  4. java IntelliJ IDEA 13 注册码 IDEA序列号 License Key

    java IntelliJ IDEA 13 注册码 IDEA序列号 License Key Username: JavaDeveloper@sskaje.me License: 282971-M1NW ...

  5. Git分支管理小结

    分支管理命令 每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而是指向mas ...

  6. Windows内核进程管理器解析

    Windows内核是如何实现线程挂起的?如何实现线程挂载到进程的?如何实现杀死进程和线程的? 从源码分析一下,这些操作具体在源码上是如何实现的. 进程创建.线程切换.线程跨越CPU权限级.进程挂靠.杀 ...

  7. 洛谷P1876开灯 题解

    题目传送门 这道题目是道数学题(下面也写了),所以仔细研究发现:N轮之后,只有是小于N的完全平方数的灯能亮着.所以接下来就好办了: #include<bits/stdc++.h> usin ...

  8. MVC – 4.mvc初体验(2)

    5.显示学员列表 效果 数据表 5.1 首先,在文件夹Models新建一个新建项(W),选择ADO.NET 实体数据模型 (SingleTest.edmx) 5.2 建一个控制器,StudentsCo ...

  9. NIO-5补充

    import java.io.IOException; import java.nio.ByteBuffer; import java.nio.channels.FileChannel; import ...

  10. 【51nod】1340 地铁环线

    今天头非常疼,躲在家里没去机房 反正都要颓废了,然后花了一上午研究了一下这道神题怎么做-- 题解 首先我们发现,如果我们设\(dis[i]\)为从\(0\)节点走到\(i\)节点的距离 那么题目中给出 ...