HTML5+NodeJs实现WebSocket即时通讯
转自:https://www.cnblogs.com/axes/p/3586132.html
最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有Websocket也很值得关注。可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了,而WebSocket无疑是最合适的。WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量。所以WebScoket暂时来说是实时通讯的最佳协议了。
至于服务器语言选择nodeJs,一是因为自己是做前端的,对javascript比较熟悉,相比于其他后台语言,自然会更喜欢nodeJs了,二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket,直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了(注意,如果npm安装不了的话,可以试试cnpm来安装此模块),然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所有很多工作都不用我们自己做,直接调用别人封装好的方法就好了。
【服务端代码,可以命名为server.js】,根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。
var ws = require("nodejs-websocket");
console.log("开始建立连接...")var game1 = null,game2 = null , game1Ready = false , game2Ready = false;
var server = ws.createServer(function(conn){conn.on("text", function (str) {console.log("收到的信息为:"+str)if(str==="game1"){game1 = conn;game1Ready = true;conn.sendText("success");}if(str==="game2"){game2 = conn;game2Ready = true;}if(game1Ready&&game2Ready){game2.sendText(str);}conn.sendText(str)})conn.on("close", function (code, reason) {console.log("关闭连接")});conn.on("error", function (code, reason) {console.log("异常关闭")});
}).listen(8001)
console.log("WebSocket建立完毕")
如下截图:
【game1代码,命名为game1.html】:通过点击获取三个框的内容,传到服务器
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.kuang{text-align: center;margin-top:200px;}#mess{text-align: center}.value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}</style>
</head>
<body><div id="mess">正在连接...</div><div class="kuang"><div class="value" id="value1">小明小明</div><div class="value" id="value2">大胸大胸</div><div class="value" id="value3">小张小张</div></div><script>var mess = document.getElementById("mess");if(window.WebSocket){var ws = new WebSocket('ws://192.168.17.80:8001');ws.onopen = function(e){console.log("连接服务器成功");ws.send("game1");}ws.onclose = function(e){console.log("服务器关闭");}ws.onerror = function(){console.log("连接出错");}ws.onmessage = function(e){mess.innerHTML = "连接成功"document.querySelector(".kuang").onclick = function(e){var time = new Date();ws.send(time + " game1点击了“" + e.target.innerHTML+"”");}}}</script>
</body>
</html>
截图如下:
【game2代码】:获取服务推送来的消息,并且显示:
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.kuang{text-align: center;margin-top:200px;}#mess{text-align: center}</style>
</head>
<body><div id="mess"></div><script>var mess = document.getElementById("mess");if(window.WebSocket){var ws = new WebSocket('ws://192.168.17.80:8001');ws.onopen = function(e){console.log("连接服务器成功");ws.send("game2");}ws.onclose = function(e){console.log("服务器关闭");}ws.onerror = function(){console.log("连接出错");}ws.onmessage = function(e){var time = new Date();mess.innerHTML+=time+"的消息:"+e.data+"<br>"}}</script>
</body>
</html>
截图如下:
运行截图:
代码非常简单:很容易看懂,nodejs-WebSocket的调用也非常简洁明了,具体nodejs-websocket的API可以看https://www.npmjs.org/package/nodejs-websocket,里面都有介绍,自己测试一下,就很容易了,客户端的实现也是很简单,就通过onopen,onmessage等几个方法就可以实现了。
HTML5+NodeJs实现WebSocket即时通讯相关推荐
- NodeJs 实现 WebSocket 即时通讯(简单版)
服务端代码 var ws = require("nodejs-websocket"); console.log("开始建立连接...")var game1 = ...
- java SSM 框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码
A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生 ...
- java代码编辑器 pdf文件预览 主流SSM 代码生成器 shrio redis websocket即时通讯
获取[下载地址] QQ: 313596790 官网 http://www.fhadmin.org/ A 代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [ ...
- 代码生成器 websocket即时通讯 shiro redis 后台框架源码
获取[下载地址] QQ: 313596790 A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 ...
- TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(一)
最近看到TWaver 的html5版本即将发布了,于是今天用TWaver HTML5 + NodeJS + express + websocket.io + redis搭建了一个简单原型.先发出几张效 ...
- php实现websocket即时通讯
php实现websocket即时通讯 系统环境 环境配置 概述 websocket原理 php服务端 web客户端 开启Socket服务器程序 系统环境 centos 7 php5.6 环境配置 ph ...
- 使用tomcat方式实现websocket即时通讯服务端讲解
使用tomcat方式实现websocket即时通讯服务端讲解 第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...
- [开源] .NETCore websocket 即时通讯组件---ImCore
ImCore 利用 webSocket 协议实现简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. Quick Start dotnet add packag ...
- SpringBoot开发网页即时聊天室/IM通信/WebSocket/即时通讯
现在的java开发基本都是基于springboot,所以我们就基于springboot2环境. 效果展示(基于网页浏览器的,不是桌面程序) 通讯协议: 现在的主流浏览器基本都支持html5标准,所以我 ...
最新文章
- javascript设计模式--单例模式
- AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)
- C#流对象使用完后不立即释放的问题
- linux下c语言http服务器_服务器端开发经验总结 Linux C语言
- linux下c语言编程gedit,Ubuntu Linux下实现Gedit支持NesC语法高亮
- 一次误操作导致的gi psu升级失败
- redis+mybatis+spring
- mysql到es的交叉验证
- 内容管理领域举足轻重的100家公司
- STM32+FreeRtos 移植letter-shell工具
- 【必应】Bing自动提交收录python脚本
- 等效距离计算公式_等效焦距换算(等效焦距的计算公式)
- 【笔记总结】高中生物——【选一 Ⅰ】传统发酵技术的应用
- 利用阿里云ECS制作个人简历网站
- 用伪类添加翘边阴影::before和::after
- 行测题库:行测每日一练常识判断练习题02.04
- 适合全屏手机的高清壁纸,看这里!
- android百度地图api两点画线,android百度地图:在地图上绘制点、线、多边形、圆形和文字...
- 2021年中国羊肉市场供需现状、进出口贸易及价格走势分析[图]
- 启动kibana报错:Elasticsearch cluster did not respond with license information
热门文章
- 【一起去大厂系列】什么是回表查询?怎么优化回表查询?
- 深入理解弹性盒布局(fiex-box)——Web前端系列自学笔记
- java mysql 更新_MySQL更新和删除数据
- 传统公司部署OpenStack(t版)简易介绍(七)——cinder模块部署
- cassss服务未启动_冰箱不启动是因为什么?要怎么解决这个问题
- 基因表达式编程gep_基因表达式编程GEP— 前言
- Xshell 连接本地的Linux 系统,提示:Could not connect to '192.168.182.128' (port 23): Connection failed
- Windows Server 笔记之网络负载平衡(NLB)和服务质量(QoS)简介
- java接口常用_java的常用接口
- 服务器维护以后只有辅助能进,通过服务器信息维护进行“半自动化”运维