app.js
/**
* 服务端
*/
/**
* 1 将nodejs-websock包引进来
*/
var ws = require("nodejs-websocket");
/**
* 2 创建一个WebSocket服务,建立TCP连接,
* conn就是连进来的连接
* server 监听2333端口
*/
var server = ws
.createServer(function(conn) {
console.log("New connection"); // 表示新的连接进来了
/**
* conn绑一个text事件,并接受一个回调
*/
conn.on("text", function(str) {
console.log(str);
// 给客户端返回信息
var data = JSON.parse(str);
switch (data.type) {
case "setname":
conn.nickname = data.name;
boardcast(
JSON.stringify({
name: "Server",
text: data.name + "加入了房间"
})
);
break;
case "chat":
boardcast(
JSON.stringify({
name: conn.nickname,
text: data.text,
type: "chat"
})
);
break;
default:
break;
}
});
// 退出房间提示
conn.on("close", function() {
boardcast(
JSON.stringify({
name: "Server",
text: conn.nickname + "离开了房间"
})
);
});
conn.on("error", function(err) {
console.log(err);
});
})
.listen(2333);
/**
* 编写广播的方法
*/
function boardcast(str) {
// connections包含所有的conn,即自己的和别人的都包含
/**
* 即先拿到所有的链接,给他做一个循环,这样就能拿到它得每一个对象
*/
server.connections.forEach(function(conn) {
conn.sendText(str);
});
}
index.html
<!--
客户端
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="name">
<button id="setname"></button>
<input type="text" id="text">
<button id="btn" type="button">发送</button>
<div id="container">
</div>
<script>
/**
* 这里我们创建一个WebSocket,里面填上服务端连接及端口号
* ws 表示它的协议
*
*/
var ws = null;
/**
* 向服务端发送消息
*/
document.getElementById('setname').onclick = function () {
var name = document.getElementById('name').value;
if (name === '') return console.log('名字为空');
ws = new WebSocket('ws://localhost:2333');
ws.onopen = function () {
ws.send(JSON.stringify({ name: name, type: 'setname' }));
}
document.getElementById('btn').onclick = send;
document.getElementById('text').onkeyup = function(e){
if(e.keyCode !== 13) return;
send();
}
/**
* 接受服务端信息
*/
ws.onmessage = function (e) {
var con = document.getElementById('container');
con.insertBefore(
createChatParel(JSON.parse(e.data)), con.children[0]
);
}
document.getElementById('setname').setAttribute('disabled', true);
}
function createChatParel(data) {
var name = data.name;
var text = data.text;
var div = document.createElement('div');
var span1 = document.createElement('span1');
var span2 = document.createElement('span2');
span1.innerHTML = name + ' ' + (new Date()).toString();
span2.innerHTML = text;
span1.style.color = '#00f';
span1.style.fontWeight = '900';
div.appendChild(span1);
div.appendChild(document.createElement('br'));
div.appendChild(span2);
return div;
}
function send() {
var text = document.getElementById('text');
if (text.value === '') return;
ws.send(JSON.stringify({
text: text.value,
type: "chat"
}));
text.value = '';
}
</script>
</body>
</html>
package-lock.json
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"nodejs-websocket": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/nodejs-websocket/-/nodejs-websocket-1.7.1.tgz",
"integrity": "sha1-zM+7qCO/HPqWgPFoq3q1MSHkhBA="
}
}
}