html5 nodejs&websocket聊天demo

来源：互联网发布：数据光盘编辑：程序博客网时间：2024/06/04 18:01

首先需要安装nodejs

然后安装 npm install nodejs-websocket

以上为nodejs基础知识如有疑问可以查阅相关资料。

首先创建ws.js放到nodejs目录下。

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;      //conn.sendText("success");    }    if(game1Ready && game2Ready) {      if(str==="game1" || str==="game2"){        game1.sendText("success");        game2.sendText("success");      }      else{        game1.sendText(str);        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.html和game2.html，为了方便起见也放到nodejs目录下.

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 id="content"></div><div>    <input type="text" id="mytext"><input type="button" id="dosend" value="发送"></div><script>    function getNowFormatDate() {        var date = new Date();        var seperator1 = "-";        var seperator2 = ":";        var month = date.getMonth() + 1;        var strDate = date.getDate();        if (month >= 1 && month <= 9) {            month = "0" + month;        }        if (strDate >= 0 && strDate <= 9) {            strDate = "0" + strDate;        }        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate                + " " + date.getHours() + seperator2 + date.getMinutes()                + seperator2 + date.getSeconds();        return currentdate;    }    var mess = document.getElementById("mess");    var content = document.getElementById("content");    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){            if(e.data==="success"){                mess.innerHTML = "连接成功";            }            else{                content.innerHTML+=getNowFormatDate()+"<br>"+e.data+"<br><br>";            }        }        document.querySelector("#dosend").onclick = function(e){            ws.send("g1:"+document.querySelector("#mytext").value);            document.querySelector("#mytext").value = "";        }    }</script></body></html>

game2.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 id="content"></div><div>    <input type="text" id="mytext"><input type="button" id="dosend" value="发送"></div><script>    function getNowFormatDate() {        var date = new Date();        var seperator1 = "-";        var seperator2 = ":";        var month = date.getMonth() + 1;        var strDate = date.getDate();        if (month >= 1 && month <= 9) {            month = "0" + month;        }        if (strDate >= 0 && strDate <= 9) {            strDate = "0" + strDate;        }        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate                + " " + date.getHours() + seperator2 + date.getMinutes()                + seperator2 + date.getSeconds();        return currentdate;    }    var mess = document.getElementById("mess");    var content = document.getElementById("content");    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){            if(e.data==="success"){                mess.innerHTML = "连接成功";            }            else{                content.innerHTML+=getNowFormatDate()+"<br>"+e.data+"<br><br>";            }        }        document.querySelector("#dosend").onclick = function(e){            ws.send("g2:"+document.querySelector("#mytext").value);            document.querySelector("#mytext").value = "";        }    }</script></body></html>

好的我们主要的文件都已经创建好了

接下来我们在nodejs目录下运行cmd，键入 node ws.js 回车，会有如下提示：

然后我们用chrome分别打开 game1.html和game2.html。最好以两个窗口模式访问，这样更直观。

如图：

请注意截图的两个访问地址，不用通过服务器进行访问就可以。

当两个页面都打开以后，两个页面的顶部会同时显示“”“连接成功”。

接下来任意一个窗口发消息后，两个窗口都会同时受到消息。

0 0