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

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

服务端代码:

  1. const app = require('http').createServer()
  2. const io = require('socket.io')(app)
  3. app.listen(8877)
  4.  
  5. io.on('connection', scoket => {
  6.   let i = 1
  7.   const t = setInterval(()=>{
  8.     i++
  9.     if(i >= 12) {
  10.       clearInterval(t)
  11.     }
  12.     // 服务端往客户端发送消息
  13.     scoket.emit('news', { hello: 'world', t: new Date().getTime() })
  14.   }, 1000)
  15.  
  16.   // 服务端监听客户端的消息
  17.   scoket.on('receiveEvent', data => {
  18.     console.log('receiveEvent: ', data)
  19.   })
  20. })

客户端代码:

-- Vue 例子：

  1. <template>
  2.   <div>
  3.     <p @click="clientToServer">scoket:</p>
  4.     <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. import io from 'socket.io-client'
  10. export default {
  11.   beforeMount() {
  12.     // 初始化 客户端 socket
  13.     this.socket = io('http://localhost:8877')
  14.   },
  15.   data() {
  16.     return {
  17.       arr: []
  18.     }
  19.   },
  20.   mounted() {
  21.     // 监听服务端 scoket 'news' 数据流
  22.     this.socket.on('news', data => {
  23.       this.arr.push(data)
  24.     })
  25.   },
  26.   methods: {
  27.     // 客户端往服务端发送消息
  28.     clientToServer() {
  29.       this.socket.emit('receiveEvent', 'Hi~ im from clientSide')
  30.     }
  31.   },
  32.   // 销毁 socket
  33.   beforeDestroy() {
  34.     this.socket.close('news')
  35.   }
  36. }
  37. </script>

-- 原生代码示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Socket Demo</title>
  8.   </head>
  9.   <body>
  10.     <button>Send Msg</button>
  11.   </body>
  12.   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
  13.   <script>
  14.     const wsUrl = "http://localhost:8877";
  15.     window.onload = () => {
  16.       const socket = io.connect(wsUrl);
  17.       // 监听服务端消息
  18.       socket.on("news", data => {
  19.         console.log("news: ", data);
  20.       });
  21.       // 往服务端发送消息
  22.       document.getElementsByTagName('button')[0].onclick = function() {
  23.         socket.emit('receiveEvent', 'msg from client!')
  24.       }
  25.     };
  26.   </script>
  27. </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. JS 浮点加减乘除运算

    //浮点数加法运算 function FloatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1]. ...

  2. 利用开源软件 Hugin 实现照片的景深合成，使用开源软件 enfuse 做照片的曝光合成

    http://blog.csdn.net/liyuanbhu/article/details/53573847 http://blog.csdn.net/liyuanbhu/article/detai ...

  3. Delphi中Menu设置Images属性后快捷按键下划线被隐藏解决方法

    现象:MainMenu设置Images属性后,看不到快捷按键的下划线,如:新建(&N) 分析:VCL中Menus.pas单元的代码,看到如下语句procedure TMenuItem.Adva ...

  4. Markdown 语法简体中文版

    Markdown 语法简体中文版(fork 于繁体中文版 http://markdown.tw/ ) http://wowubuntu.com/markdownhttps://github.com/r ...

  5. java.lang.Integer cannot be cast to java.lang.String

    错误原因是类型转换! 说Integer 类型不能转成String类型.  解决办法: 将错误中的(String)强制转换类型修改为    object.toString() toString方法是Ja ...

  6. SYN5307型数字式电秒表

    SYN5307型数字式电秒表 产品概述 SYN5307型数字式电秒表是由西安同步电子科技有限公司精心设计生产的一款多功能,高精度电秒表.该仪器采用高精度石英晶振作为测量基准,测量准确度高于一般的电秒表 ...

  7. # 构建以及运行Springboot Docker镜像时的变量传递

    Docker可以把我们的运行环境打包,然后我们只要run就可以了.大部分hello world都是这么写的.但都缺少了实际应用环节.以springboot为例,hello world的Dockerfi ...

  8. 使用fastjson读取超巨json文件引起的GC问题

    项目中需要将巨量数据生成的json文件解析,并写入数据库,使用了 alibaba 的 fastjson,在实践过程中遇到了 GC 问题,记录如下: 数据大约为70万条,文件大小在3~4G左右,使用 f ...

  9. 十分钟了解Kubernetes

    何为Kubernetes? 最简单的一句话来概括Kubernetes. 它就是一套成熟的商用服务编排解决方案.Kubernetes定位在Saas层,重点解决了微服务大规模部署时的服务编排问题. Kub ...

  10. 【转】解决Nginx php-fpm配置有误引起的502错误

    转自:https://www.centos.bz/2017/07/nginx-php-fpm-502-error/ 在Ubuntu+Nginx+PHP环境下部署好以后,访问网站报错502,在后台ngi ...