两个页面之间互相通信

首先搭建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. ACM International Collegiate Programming Contest World Finals 2014

    ACM International Collegiate Programming Contest World Finals 2014 A - Baggage 题目描述:有\(2n\)个字符摆在编号为\ ...

  2. 让Linux应用更加得心应手的

    1.计算文件数和目录数  下面的语句可以帮你计算有多少个文件和多少个目录 # ls -l * |grep "^-"|wc -l ---- to count files # ls - ...

  3. （六）Spring4 整合Hibernate4，Struts2

    第一节:S2SH 整合所需Jar 包 Struts2.3.16,Spring4.0.6,Hibernate4.3.5 整合所需jar 包: Struts2.3.16 jar 包 Spring4.0.6 ...

  4. 邀请用户进TestFlight 体验 App 的测试版本

    iphone手机用户,在工作中常见到,APP版本现在是Beta阶段(iOS版本),需要邀请一些用户来体验新版本,在版本上线前提出更好的建议及时进行修改,此时用到了testflight,很方便的通过邀请 ...

  5. 常用 Java Profiling 工具的分析与比较

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-profiling/index.html 在 Java 程序的开发过程中,不可避免地会遇到内存使用. ...

  6. day5冒泡排序

    冒泡排序:是一种基础的算法,实现数据的排序,排序的原则是前一个与后一个进行比较,如果前面的值大则交换,否则不交换,多次循环每次把最大的数据循环至后面就能够完成所需. 上面的图是冒泡排序的原理,每次循环 ...

  7. js屏蔽手机的物理返回键

    $(document).ready(function() { if (window.history && window.history.pushState) { $(window).o ...

  8. lr如何屏蔽全局变量的影响

    首先要熟悉C语言的全局变量和局部变量的含义: C语言中的变量详解 先说说变量的作用域,比如,在函数中,形参变量只是在被调用期间才分配内存单元,调用结束立即释放.这就说明形参变量只有在函授内才是有效的, ...

  9. 《Android虚拟机》--内存分配策略

    No1: Java在内存分配时会涉及到以下区域: 寄存器:我们在程序中无法控制 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 堆:存放用new产生的数据 静态域:存放在对 ...

  10. XML和HTML的区别

    1.很多新手程序员总是会问HTML和XML有什么区别,接下来就解释一下: 什么是XML? XML 指可扩展标记语言(EXtensible Markup Language). XML 是一种很像HTML ...