两个页面之间互相通信

首先搭建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. ubuntu12.04 svn ssl错误

    1,ubuntu12.04 svn ssl错误提示: OPTIONS of '<url>': SSL handshake failed: SSL error: Key usage viol ...

  2. 135.Candy---贪心

    题目链接 题目大意:分糖果,每个小朋友都有一个ratings值,且每个小朋友至少都要有一个糖果,而且每个小朋友的ratings值如果比左右邻舍的小朋友的ratings值高,则其糖果数量也比邻舍的小朋友 ...

  3. Bootstrap开发模板

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. C语言 五子棋

    #include <stdlib.h> #include <stdio.h> #include <conio.h> #include <string.h> ...

  5. Java学习（基本语句，语法，变量）

    一.基本语法: public class Demo { //定义一个类 public static void main(String[] args) { //主方法,一切程序的起点 /* 在屏幕上打印 ...

  6. php极速后台开发框架LotusAdmin

    组件:基于thinkphp5.0.12+layui2.1版本 演示站点:https://www.lotusadmin.top/账号 : admin密码:123456 官方QQ交流群:606645328 ...

  7. 字典dict常用方法

    字典是列表中常用的方法,我们经常处理字典,字典嵌套,很多复杂的操作都来自于基础,只是改变了样式而已,本质是不变的.下面来看看字典中常用的功能都有那些:     1.clear(self) def cl ...

  8. Codeforces Round #286 (Div. 1) D. Mr. Kitayuta's Colorful Graph

    D - Mr. Kitayuta's Colorful Graph 思路:我是暴力搞过去没有将答案离线,感觉将答案的离线的方法很巧妙.. 对于一个不大于sqrt(n) 的块,我们n^2暴力枚举, 对于 ...

  9. 【WPF】OnApplyTemplate

    操作模板控件 在做WPF开发的时候,我们通常因为满足不同的需求会开发一些自定义控件来满足需要,我们会自定义模板来定义控件的外观,添加命令和路由事件来给控件添加行为,那如何在模板中查找元素并关联事件处理 ...

  10. 《java虚拟机》----java内存模型与线程

    No1. No2. java内存模型规定了所有的变量都存储在主内存中(Main Memory)中 每条线程还有自己的工作内存(Working Memory) 线程的工作内存中保存了被该线程使用到的变量 ...