分为客户端和服务端,客户端就是一个简单的html页面,服务端使用node进行编写。具体代码如下
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>websoket</title>
</head>
<body>
<h1>chat room</h1>
<input type="text" id="msg" />
<button id="send">发送</button>
<script type="text/javascript">
var websocket = new WebSocket("ws://127.0.0.1:3001/");
function showMsg(str){
var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div)
}
websocket.onopen=function(){
console.log("open");
// 用户发送文字
document.getElementById('send').onclick = function() {
var txt = document.getElementById('msg').value;
if (txt) {
websocket.send(txt);
}
}
}
websocket.onclose = function() {
console.log("close");
}
websocket.onmessage = function(e) {
console.log(e.data);
showMsg(e.data);
}
</script>
</body>
</html>
server.js
var ws = require("nodejs-websocket"). // 引入webSocket模块
var port = 3001;
var clientCount = 0; // 用来区分不同的用户
var server = ws.createServer(function (conn) {
console.log("New connection")
clientCount++ // 新建一个webScoket连接就加一,保证用户名唯一性
conn.nickname = "user" + clientCount
// 用户进入,广播给所有的用户
broadcast("******* "+conn.nickname + " comes in *******");
conn.on("text", function (str) {
console.log("Received "+str)
broadcast(conn.nickname + " say: " + str)
}) // 用户发送文字,广播给所有的用户
conn.on("close", function (code, reason) {
broadcast("******* " + conn.nickname + " left *******");
}) // 用户离开,广播给所有的用户
conn.on("error", function(err) {
console.log("error: "+err);
})
})
// 端口监听
server.listen(port,'0.0.0.0',()=>{
console.log('websocket服务启动-使用端口',port);
});
console.log("websocket server listening on " + port);
// 遍历所有的连接进行遍历发送文字
function broadcast (str) {
server.connections.forEach(function (connection) {
connection.sendText(str)
})
}
使用方法
创建index.html
和server.js
文件,在server
文件目录下npm init
初始化package.json
文件,并安装nodejs-websocket
npm install nodejs-websocket --save -D
启动server.js
node server.js
多开几个index.html页面就能体验到效果了