服务端代码

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建立完毕")

客户端代码:

  传数据到服务器

<!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://127.0.0.1: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>

  

  接收服务端发送的数据

<!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://127.0.0.1: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>

来源:https://www.cnblogs.com/axes/p/3586132.html

NodeJs 实现 WebSocket 即时通讯(版本一)的更多相关文章

  1. NodeJs 实现 WebSocket 即时通讯(版本二)

    服务端代码 websocket.js 'use strict' const WebSocket = require('ws'); const connections = new Map(); cons ...

  2. HTML5+NodeJs实现WebSocket即时通讯

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可 ...

  3. Springboot 项目源码 Activiti6 工作流 vue.js html 跨域 前后分离 websocket即时通讯

    特别注意: Springboot 工作流  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0.0+ mybaits+maven+接 ...

  4. 使用tomcat方式实现websocket即时通讯服务端讲解

    使用tomcat方式实现websocket即时通讯服务端讲解 第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...

  5. java SSM框架 代码生成器 快速开发平台 websocket即时通讯 shiro redis

    A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 , ...

  6. [开源] .NETCore websocket 即时通讯组件---ImCore

    前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...

  7. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  8. java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc

    官网 http://www.fhadmin.org/D 集成安全权限框架shiro  Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...

  9. java SSM 框架 代码生成器 websocket即时通讯 shiro redis

    1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限      角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限.      按钮权限: 给角色分配按钮权限. ...

随机推荐

  1. Git tag相关命令

    常见命令如下: // 查看标签,可加上参数-l(列表形式列出) -n(附加说明) git tag [-l -n] // 查看符合检索条件的标签 git tag -l .*.* // 查看对应标签状态 ...

  2. 一个网站完整的SEO优化方案,方法,怎么做seo优化?

    SEO优化主要分为站内优化,站外优化.如果非得说一套完整的SEO优化方案,那就是需要4名专业人员:前端人员,内容编辑,网络推广人员,和数据分析人员.那以下就详细介绍这四个岗位各自负责的工作有哪些: 一 ...

  3. Maven配置JRE版本

    Maven配置JRE版本 apache-maven-3.5.0\conf\settings.xml <profiles> <profile> <id>develop ...

  4. Docker4-docker私库的搭建及常用方法-docker-registry方式

    一.简单介绍 前面已经介绍,可以使用Docker Hub公共仓库,但是大多数情况企业都需要创建一个本地仓库供自己使用.这里介绍几种搭建私库的方法 私库的好处有几点 1.节约带宽 2.可以自己定制系统 ...

  5. 手把手教你如何在window下将jenkins+allure集成生成的测试报告通过jenkins配置邮箱自动发送-04(非常详细,非常实用)

    简介 上一篇生成测试报告,小伙伴们和童鞋们就又问道,测试报告已经生成了,怎么发送给相关的负责人了?小伙伴们和童鞋们不要着急,听宏哥慢慢给你道来,心急吃不了热豆腐哈.今天这篇文章宏哥就给小伙伴和童鞋们来 ...

  6. ThoughtWorks 面试三连挂,以后再也不去了

    先说我吧,之前在外企呆过两年,那时Team的很多同事都去了ThoughtWorks,所以有一种情怀,只要有机会我就去面试...之前在Team里对我的评价也很高(不是我说的),现在也是公司的技术总监,总 ...

  7. zoj 3886 Nico Number

    中文题面: 问题描述] 我们定义一个非负整数是“好数”,当且仅当它符合以下条件之一: 1. 这个数是0或1 2. 所有小于这个数且与它互质的正整数可以排成一个等差数列 例如,8就是一个好数,因为1,3 ...

  8. OSX 10.14.2 安装Cocoapods 出现问题的解决方法

    今天尝试用 Cocoapods安装个第三方库.. 输入pod install, 发现 command not find. WTF! 估计是升级10.11后Cocoapods被干掉了. 我输入 sudo ...

  9. NoUniqueBeanDefinitionException常见异常!!

    Caused by: org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of ...

  10. Django-admin站点管理的详细使用

    使用Django的管理模块,需要按照如下步骤操作: 管理界面本地化 创建管理员 注册模型类 自定义管理页面 1 管理界面本地化 在settings.py中设置语言和时区 LANGUAGE_CODE = ...