Node.js socket 双向通信
使用场景: 聊天室；大量数据常驻交互；
技术栈： 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 双向通信的更多相关文章
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- （转）使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】
原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...
- 转载：node.js socket.io
本文转自:http://www.xiaocai.name/post/cf1f9_7b6507 学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...
- 基于node.js+socket.io+html5实现的斗地主游戏（1）概述
一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...
- node.js+socket.io配置详解
由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...
- 基于Node.js+socket.IO创建的Web聊天室
这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...
- node.js + socket.io实现聊天室一
前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
随机推荐
- Qt DLL总结【二】-创建及调用QT的 DLL（三篇）good
目录 Qt DLL总结[一]-链接库预备知识 Qt DLL总结[二]-创建及调用QT的 DLL Qt DLL总结[三]-VS2008+Qt 使用QPluginLoader访问DLL 开发环境:VS20 ...
- Delphi使用TObject类对象创建接受window消息（使用Classes.AllocateHWnd为对象创建一个尺寸为0的窗口，从而有了Handle）good
在delphi中,有时候我们希望对象可以接收windows消息,怎么办呢?因为要接收windows消息起码要有windows Handle,难道要建立的一个可见窗口?那样似乎太差强人意了.delphi ...
- 通过内核对象在服务程序和桌面程序之间通信的小问题 good
关于在通过 事件对象 在服务程序和普通桌面应用程序相互之间通信的问题,分类情况进行讨论:1.普通桌面应用程序中创建事件,服务程序中打开事件 XP的情况普通桌面应用程序中创建: m_hEvent = : ...
- 常用Linux网络命令
TCP状态统计: netstat -anp TCP各个状态的连接数:netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a] ...
- C++程序设计1（侯捷video 1-6）
一.头文件的防御式声明(video2) #ifndef __COMPLEX__ #define __COMPLEX__ //内容 #endif 二.初步感受模板(video2) 定义的时候: //复数 ...
- 【JDK8】HashMap集合 源码阅读
JDK8的HashMap数据结构上复杂了很多,因此读取效率得以大大提升,关于源码中红黑树的增删改查,博主没有细读,会在下一篇博文中使用Java实现红黑树的增删改查. 下面是类的结构图: 代码(摘抄自J ...
- 大流量下的 ElasticSearch 搜索演进
这是泥瓦匠(bysocket.com)的第27篇精华分享 ES (ElasticSearch)是分布式搜索引擎.引擎太晦涩,其实类似一个 MySQL ,一个存储.方便提供下面功能: 近实时搜索 全文检 ...
- Python开发【第七篇】： 面向对象和模块补充
内容概要 特殊成员 反射 configparser模块 hashlib模块 logging模块 异常处理 模块 包 1. 特殊成员 什么是特殊成员呢? __init_()就是个特殊的成员. 带双下划线 ...
- Linux实例/etc/fstab文件配置错误导致系统启动异常
Centos 7.3系统 问题现象: 阿里云ECS升级配置后重启,SSH连接不上.登录控制台远程连接ECS,出现以下界面. 提交工单阿里云反馈:https://help.aliyun.com/kno ...
- VIM技巧， .vimrc文件
将 .vimrc文件上传到用户家目录下 文件内容如下: autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()&quo ...