您的位置：首页 > Web前端 > Node.js

html5 nodejs&websocket聊天demo

2017-05-04 16:48 357 查看

首先需要安装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。最好以两个窗口模式访问，这样更直观。

如图：

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript nodejs websocket html5

相关文章推荐

新的分享

章节导航