声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！

　　最近都在学习HTML5，做canvas游戏之类的，发现HTML5中除了canvas这个强大的工具外，还有WebSocket也很值得注意。可以用来做双屏互动游戏，何为双屏互动游戏？就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了，而WebSocket无疑是最合适的。WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以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等几个方法就可以实现了。

　　

HTML5+NodeJs实现WebSocket即时通讯的更多相关文章

  1. NodeJs 实现 WebSocket 即时通讯（版本二）

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

  2. NodeJs 实现 WebSocket 即时通讯（版本一）

    服务端代码 var ws = require("nodejs-websocket"); console.log("开始建立连接...") var game1 = ...

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

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

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

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

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

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

  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. 集算器协助java处理多样性数据源之MongoDB

    MongoDB不支持join,其官网上推荐的unity jdbc可以把数据取出来进行二次计算实现join运算,但这些join.group.函数.表达式等高级功能都是收费版才有,而且即使是收费版本,对子 ...

  2. fis自动化部署

    1,自动部署到远程服务器 (1),参考:https://github.com/fex-team/receiver (2),接收服务代码目录:/var/www/html/fis/receiver-mas ...

  3. Tomcat 内存和线程配置优化

    1. tomcat 的线程配置参数详情如下: 修改conf/server.xml中的<Connector .../> 节点如下: <Connector port="8080 ...

  4. 搭建docker私有仓库，建立k8s集群

    服务器IP角色分布 192.168.5.2 etcd server 192.168.5.2 kubernetes master 192.168.5.3 kubernetes node 192.168. ...

  5. 迭代加深搜索 codevs 2541 幂运算

    codevs 2541 幂运算  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 从m开始,我们只需要6次运算就可以计算出 ...

  6. 图的遍历之深度优先搜索（DFS）

    深度优先搜索(depth-first search)是对先序遍历(preorder traversal)的推广.”深度优先搜索“,顾名思义就是尽可能深的搜索一个图.想象你是身处一个迷宫的入口,迷宫中的 ...

  7. Jetson TK1刷机+配置Mini PCI-e无线网卡

    最近买了台4K电视,觉得可以当显示器用,但没主机,不知怎的想到了Jetson TK1,于是一冲动买了.因为没网线,而Jetson TK1没有无线网卡,所以也折腾了一番,记录一下,给万一也有像我一样没有 ...

  8. Codeforces Round 261 Div.2 D Pashmak and Parmida's problem --树状数组

    题意:给出数组A,定义f(l,r,x)为A[]的下标l到r之间,等于x的元素数.i和j符合f(1,i,a[i])>f(j,n,a[j]),求有多少对这样的(i,j). 解法:分别从左到右,由右到 ...

  9. 第22章 DLL注入和API拦截（1）

    22.1 注入的一个例子(跨进程子类化窗口) ①子类化窗口可以改变窗口的行为,让发往该窗口的消息重新发到我们指定的过程来处理.但这种行为只能在本进程中(如A),对于从一个进程(如B)去子类化另一个进程 ...

  10. cnblog code syntaxhighlighter view

    wlw代码插件 测试多款 wlw插入代码插件 在博客园的代码高亮效果 1.Code Snippet 1: public override void Update() 2: { 3: base.Upda ...