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

技术栈： 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. nltk处理文本

    nltk(Natural Language Toolkit)是处理文本的利器. 安装 pip install nltk 进入python命令行,键入nltk.download()可以下载nltk需要的 ...

  2. 机器学习Machine Learning(ML)

    什么是机器学习 定义 对于某个任务T和表现的衡量P,当计算机程序在该任务T的表现上,经过P的衡量,随着经验E而增长,称计算机能够通过经验E来学习该任务.(Tom Mitchell) 举例而言,在跳棋游 ...

  3. 推荐一个第三方Qt库的集合 good

    https://inqlude.org/ Stable libraries | Development versions | Unreleased | Commercial | All attica ...

  4. MinGW版Qt如何搭建lua环境？(详细步骤)

    操作系统是windows,lua是Lua for Windows 5.1.4包含了这三个头文件 <ignore_js_op>  在.pro里加了includepath: <ignor ...

  5. C++中代理类和句柄类

    指针是 C 与其他语言区别的重要特征之一,在 C++ 中,指针也被广泛运用,我们通过指针实现多态.然而,众所周知,指针的使用必须小心,否则很容易造成内存泄漏 Memory Leak.当我们有几个指针指 ...

  6. Qt的槽可以使用默认参数

    引用自:http://www.ibm.com/developerworks/cn/linux/guitoolkit/qt/signal-slot/ 的一篇经典文章,是关于Qt的信号和槽的分析的.看年份 ...

  7. Oracle数据库备份和恢复的基本命令

    Oracle数据库备份与恢复基本命令 1. 获取帮助 $ exp help=y $ imp help=y 2.三种工作方式 (1)交互式方式 $ exp 然后按提示输入所需要的参数 (2)命令行方式 ...

  8. 在无界面centos7上部署jdk和tomcat

    1.安装xshell6 2.创建服务器连接,输入用户名和密码 3.输入 sudo su -root 获取root权限 4.输入 cd /usr/local 进入local文件夹 5.输入 wget - ...

  9. 【JavaScript】彻底明白this在函数中的指向

    一.this,其实可以类比成人 说到this的话,我们在js中主要研究的都是函数中的this,在javascript中,this代表当前行为的执行主体,而context代表的是当前行为执行的的环境(区 ...

  10. spring cloud 系列第2篇 —— eureka 高可用注册中心的搭建 (F版本)

    源码仓库地址:https://github.com/heibaiying/spring-samples-for-all 一.项目结构 eureka-server为服务注册中心,负责服务的管理: eur ...