NodeJs 实现简单WebSocket 即时通讯
至于服务器语言选择nodeJs，一是因为自己是做前端的，对javascript比较熟悉，相比于其他后台语言，自然会更喜欢nodeJs了，
二是NodeJs本身事件驱动的方式很擅长与大量客户端保持高并发的连接。所以就选择NodeJs了。
服务器的实现很简单，先装一个nodeJs的模块，叫nodejs-websocket ， 直接在nodeJs命令行中敲入：npm install nodejs-websocket回车就可以安装好了，
然后就可以开始建立服务器了，因为有了nodejs-websocket模块，所以很多工作都不用我们自己做，直接调用别人封装好的方法就行了：
服务端代码
根据客户端传来的消息判断哪个是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代码】：通过点击获取三个框的内容，传到服务器
<!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等几个方法就可以实现了。
来源：https://www.cnblogs.com/axes/p/3586132.html
NodeJs 实现简单WebSocket 即时通讯的更多相关文章
- java SSM框架 代码生成器 快速开发平台 websocket即时通讯 shiro redis
A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 , ...
- Springboot 项目源码 Activiti6 工作流 vue.js html 跨域 前后分离 websocket即时通讯
特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0.0+ mybaits+maven+接 ...
- 使用tomcat方式实现websocket即时通讯服务端讲解
使用tomcat方式实现websocket即时通讯服务端讲解 第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...
- nodejs+expressjs+ws实现了websocket即时通讯,服务器和客户端互相通信
nodejs代码 // 导入WebSocket模块: const WebSocket = require('ws'); // 引用Server类: const WebSocketServer = We ...
- java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc
官网 http://www.fhadmin.org/D 集成安全权限框架shiro Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...
- java SSM 框架 代码生成器 websocket即时通讯 shiro redis
1. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限. ...
- [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了
有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...
- java SSM 框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码
A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; 技 ...
- [开源] .NETCore websocket 即时通讯组件---ImCore
前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...
随机推荐
- [译] Z-variant (Z变体)
阅读目录 1. Z轴上的区别 2. 问题 Unihan 的 kZVariant 字段 译自: en.wikipedia.org/wiki/Z-variant | 已发布zh.wiki 在Unicode ...
- 使用ajax请求数据时的几种做法
在进行前后端交互的时候,一般前端使用ajax向后端发送数据,后端根据发送的数据来返回数据,前端将这些数据接收并进行相应的处理 以下是在日常工作中总结的几点使用ajax传递数据时的情况: 1.在本页面( ...
- spring cloud zuul 配置
参考:http://www.ityouknow.com/springcloud/2017/06/01/gateway-service-zuul.html spring boot版本:2.0.3.REL ...
- springIOC学习笔记
目录 目的 引用 xml方式 配置 配置实例 使用 底层简单模拟 全注解方式 基础 包扫描方式 配置 使用 config方式 配置 使用 spring整合junit 引用 示例 目的 让spring统 ...
- 用Easing函数实现碰撞效果
用Easing函数实现碰撞效果 工程中需要的源码请从这里下载: https://github.com/YouXianMing/EasingAnimation 源码: // // ViewControl ...
- December 25th 2016 Week 53rd Sunday
Patience is bitter, but its fruit is sweet. 忍耐是痛苦的,但它的果实是甜蜜的. What can we do if there is no fruit of ...
- wooyun内网渗透教学分享之内网信息探测和后渗透准备
常规的,从web业务撕开口子url:bit.tcl.comgetshell很简单,phpcms的,一个Phpcms V9 uc api SQL的老洞直接getshell,拿到shell,权限很高,sy ...
- html禁用缓存
<!-- 禁用缓存 --><meta http-equiv="pragma" content="no-cache"><META H ...
- Discuz3.3注册程序修改添加记录推荐人账号
Discuz3.3注册入口地址为:member.php?mod=register 一.member.php: 打开之后,代码非常简单. 其中有一句: $mod = !in_array($discuz- ...
- CSS 预处理器
在程序员眼里,css不像其他程序语言(例如PHP, Javascript等等),有自己的变量.常量.条件语句以及一些编程语法,它只是一行行单纯的属性描述,写起来相当费事,而且代码难以组织和维护.自然的 ...