使用场景:  聊天室；大量数据常驻交互；

技术栈： Node.js,     Vue.js || 原生JS

服务端代码:

const app = require('http').createServer()

const io = require('socket.io')(app)

app.listen(8877)

io.on('connection', scoket => {

  let i = 1

  const t = setInterval(()=>{

    i++

    if(i >= 12) {

      clearInterval(t)

    }

    // 服务端往客户端发送消息

    scoket.emit('news', { hello: 'world', t: new Date().getTime() })

  }, 1000)

  // 服务端监听客户端的消息

  scoket.on('receiveEvent', data => {

    console.log('receiveEvent: ', data)

  })

})

客户端代码:

-- Vue 例子：

<template>

  <div>

    <p @click="clientToServer">scoket:</p>

    <p v-for="(item,index) in arr" :key="index">{{item}}</p>

  </div>

</template>

<script>

import io from 'socket.io-client'

export default {

  beforeMount() {

    // 初始化 客户端 socket

    this.socket = io('http://localhost:8877')

  },

  data() {

    return {

      arr: []

    }

  },

  mounted() {

    // 监听服务端 scoket 'news' 数据流

    this.socket.on('news', data => {

      this.arr.push(data)

    })

  },

  methods: {

    // 客户端往服务端发送消息

    clientToServer() {

      this.socket.emit('receiveEvent', 'Hi~ im from clientSide')

    }

  },

  // 销毁 socket

  beforeDestroy() {

    this.socket.close('news')

  }

}

</script>

-- 原生代码示例:

<!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>Socket Demo</title>

  </head>

  <body>

    <button>Send Msg</button>

  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>

  <script>

    const wsUrl = "http://localhost:8877";

    window.onload = () => {

      const socket = io.connect(wsUrl);

      // 监听服务端消息

      socket.on("news", data => {

        console.log("news: ", data);

      });

      // 往服务端发送消息

      document.getElementsByTagName('button')[0].onclick = function() {

        socket.emit('receiveEvent', 'msg from client!')

      }

    };

  </script>

</html>

后话(备注):

这里是使用的 Node.js  socket.io 第三方库， 笔者尝试过 pm2 集群部署后， 因为多核心运行的特点， 导致socket会话的id出现错误， 一直没处理好， 如有大神做过类似处理， 请交流指教！！！

Node.js socket 双向通信的更多相关文章

  1. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  2. （转）使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  3. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  4. 转载：node.js socket.io

    本文转自:http://www.xiaocai.name/post/cf1f9_7b6507  学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...

  5. 基于node.js+socket.io+html5实现的斗地主游戏（1）概述

    一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...

  6. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  7. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  8. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  9. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

随机推荐

  1. Windows Phone8.1系统新特性

    Windows Phone 8.1 beta SDK已经为大家透露了不少WP8.1系统的新特性,不过这些新特性还不能保证在最终的消费者版本中都有所体现,毕竟它还仅是SDK版本.日前,国外媒体WPCen ...

  2. spring boot之security

    上一节的时候,我们打开了springboot的端点,有一些数据是非常敏感的,比如/shutdown. 这一节,我们要给一些敏感信息加上权限控制. spring boot本身的security模块就很好 ...

  3. 使用Scrapy爬取图片入库,并保存在本地

    使用Scrapy爬取图片入库,并保存在本地 上 篇博客已经简单的介绍了爬取数据流程,现在让我们继续学习scrapy 目标: 爬取爱卡汽车标题,价格以及图片存入数据库,并存图到本地 好了不多说,让我们实 ...

  4. Android native进程间通信实例-binder篇之——简单的单工通信

    网上找了很多binder相关文章,大部分都是在跟踪binder实现源代码,然后再把框架代码贴出来,看着实在费力. 这篇文章从实际出发,直接用一个案例下手,后续想了解binder相关原理的话,可以参考& ...

  5. vue路由传参query和params的区别（详解！）

    1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...

  6. 手动实现 SpringMVC

    前几章我们已经分析了 Spring 的源码并且手动实现了一个 IOC/DI 容器. 这章我们在自己实现的 Spring 框架的基础上实现一个 SpringMVC 框架. 我们自己实现的 Spring ...

  7. 16 | 脑洞大开：GUI测试还能这么玩（Page Code Gen + Data Gen + Headless）？

  8. Spring入门配置(一) - IOC

    一.初始命名空间配置 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="h ...

  9. django ORM中的RelatedManager(关联管理器)

    关联管理器应用在 一对多的表 或者 多对多的表 多对多表中的用法: 在多对多的表中 正向查询 #基于对象的查询 #正查 # author_obj = Author.objects.get(id=1) ...

  10. scrapy基础知识之 CrawlSpiders爬取lagou招聘保存在mysql（分布式）：

    items.py import scrapy class LagouItem(scrapy.Item): # define the fields for your item here like: # ...