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

一步一步教您用websocket+nodeJS搭建简易聊天室(3)

2017-11-15 00:00 651 查看

摘要: 这一节带大家进行小小的改造，将聊天功能完善，加上显示所有消息，实时显示有谁进入聊天室和退出聊天室的功能。

上节我们使用node.js搭建了属于自己的第一个后端服务，但是只能将当前发送的消息通过服务端处理返回到客户端，还不能称为真正意义上的聊天室，这一节带大家进行小小的改造，将聊天功能完善，加上显示所有消息，实时显示有谁进入聊天室和退出聊天室的功能。

我们新建webSocketDemo3文件夹，然后将上节中webSocketDemo2文件夹中的所有文件拷贝进来。

然后index.html代码修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>websocket</title>
</head>
<body>
<h1>Chat Room</h1>
<input id="sendText" type="text" />
<button id="sendBtn">发送</button>
<div id="recv"></div>
</body>
<script type="text/javascript">
var websocket=new WebSocket("ws://localhost:3000");
function showMessage(str){
var div=document.createElement("div");
div.innerHTML=str;
document.body.appendChild(div);
}
websocket.onopen=function(){
console.log("websocket open");
document.getElementById("sendBtn").onclick=function(){
var txt=document.getElementById("sendText").value;
if(txt){
websocket.send(txt);
}

}
}
websocket.onclose=function(){
console.log("websocket close");

}
websocket.onmessage=function(e){
console.log(e.data);
showMessage(e.data);
}

</script>

</html>

再将wsServer.js代码内容修改如下：

var ws = require("nodejs-websocket")
var port=3000;
var user=0;

// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
console.log("New connection");
user++;
conn.nickname="user"+user;
broadcast(conn.nickname+" comes in");
conn.on("text", function (str) {
console.log("Received "+str)
//conn.sendText(str.toUpperCase()+"!!!")
broadcast(str);
})
conn.on("close", function (code, reason) {
console.log("Connection closed");
broadcast(conn.nickname+" left ");
})
conn.on("error", function (err) {
console.log("handdle error");
console.log(err);
})
}).listen(port);
console.log("websocket server listening on port "+port);
function broadcast(str){
server.connections.forEach(function(connection){
connection.sendText(str);
})
}

接下来使用终端cd进webSocketDemo3，然后重新运行以下命令以运行服务：

npm install nodejs-websocket

然后客户端运行截图：

终端运行截图：

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

标签： html5 Node.js WebSocket

相关文章推荐

新的分享

章节导航