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

技术栈： 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. Standard C 语言标准函数库速查（彩色的函数列表，十分清楚）

    Standard C 语言标准函数库速查 (Cheat Sheet) wcstombs 函数说明 #include <stdlib.h> size_t mbstowcs(wchar_t * ...

  2. Qt单元测试浅析

    Qt单元测试框架,使用于基于Qt的应用程序和库,先从一个简单的demo工程说起吧. 我们可以通过QtCreator来创建一个简单的Qt单元测试工程,夏天到了,这个demo工程的名字就叫Summer好了 ...

  3. XPath概述

    1.  XPath 具体示例可参考网址: http://www.zvon.org/xxl/XPathTutorial/General/examples.html 1.1 概述 * 现节点下所有元素 * ...

  4. Realm_King 之 .NET操作XML完整类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...

  5. ACM竞赛中的魔方问题专题(不定时更新)

    魔方有6个面,有24中不同的旋转方式: 一般有两种方法: (一):以1面为顶面,向右旋转0,90,180,270度 以2面为顶面,向右旋转0,90,180,270度 ... 以6面为顶面,向右旋转0, ...

  6. JAVA命令运行cmd命令得到的结果乱码Runtime.getRuntime().exec("");

    Process process = Runtime.getRuntime().exec("cmd /c dir c:"); BufferedReader bufferedReade ...

  7. 用java打印日历

    来自<java核心技术卷一> /** * Created by wangbin10 on 2019/1/3. * 打印当月日历 */ public class CalendarTest { ...

  8. kubernetes使用http rest api访问集群之使用postman工具访问 apiserver

    系列目录 前面一节我们介绍了使用curl命令行工具访问apiserver,命令行工具快速高效,但是对于输出非常长的内容查看不是特别方便,尤其终端界面输入的东西非常多的时候,过长的内容不是特别容易通过滚 ...

  9. tomcat配置多个数据源

    应用场景: 公司tomcat服务器中运行着多个工程,工程链接的mysql数据库不同,所以每个工程的Spring总配置文件中都配置了数据源. 需求:   将数据源统一拿到tomcat中配置. 本来指派给 ...

  10. Java学习笔记——三层架构

    Layer: UI层: user interface 用户接口层 Biz层:   service business login layer 业务逻辑层 DAO层:   Date Access Obje ...