1.安裝node烈涮。安裝依賴
2.安裝websocket 模塊依賴 命令為：npm install nodejs - websocket
3.安裝完依賴
4.建立index.js復(fù)制以下js
5.cd 找到index.js 啟動為： node index.js
var ws = require("nodejs-websocket");
var PORT =3000;
var clientCount = 0;
var server = ws.createServer(function (conn) {
// console.log("new commmmm");
clientCount ++;
conn.nickname ='路人:' + clientCount;
var mes ={};
mes.type = "enter";
mes.data = conn.nickname + '進(jìn)入了聊天';
broadcast(JSON.stringify(mes));
// broadcast(conn.nickname + '進(jìn)來');
conn.on("text",function (str) {
console.log("收到" + str);
// conn.sendText(str.toUpperCase()+"chen")
var mes ={};
mes.type = "message";
mes.data = conn.nickname + "說" + str;
broadcast(JSON.stringify(mes));
// broadcast(str);
});
conn.on("close",function (code ,reason) {
console.log('連接已關(guān)閉');
// broadcast(conn.nickname + "離開了");
var mes ={};
mes.type = "leave";
mes.data = conn.nickname + '離開了';
broadcast(JSON.stringify(mes));
// broadcast(str);
});
conn.on("error",function (err) {
console.log('處理錯誤');
});
}).listen(PORT);
console.log("WebSocket" + PORT);
function broadcast(str) {
server.connections.forEach(function (connection) {
connection.sendText(str)
})
}
建立inde.html復(fù)制一下內(nèi)容胁澳。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天</title>
<style>
{
margin: 0;
padding: 0;
}
.cl_all{
width: 350px;
margin: 40px auto 0;
}
.cl_chat_all{
width: 100%;
height: 400px;
border: 1px solid black;
}
.cl_son_all{
width: 100%;
height: 400px;
overflow-y: auto;
}
.cl_btn_all{
margin-top: 2px;
width: 100%;
overflow: hidden;
}
.cl_sen_txt{
width: 75%;
height: 34px;
float: left;
}
.cl_sen_btn{
width: 20%;
height: 36px;
background: red;
float: right;
text-align: center;
line-height: 34px;
}
.cl_add_one{
/float: right;/
color: red;
}
.cl_add_two{
/float: right;*/
color: blue;
}
</style>
</head>
<body>
<div class="cl_all">
<div class="cl_chat_all">
<div class="cl_son_all">
<div class="cl_new_span"></div>
</div>
</div>
<div class="cl_btn_all">
<input type="text" class="cl_sen_txt" placeholder="說點(diǎn)啥紊婉。。德召。" />
<div class="cl_sen_btn">發(fā)送</div>
</div>
</div>
<script type="text/javascript">
var websocket = new WebSocket("ws://localhost:3000/");
function showMessage(str , type) {
var div =document.createElement("div");
div.innerHTML=str;
if(type == "enter"){
div.className="cl_add_one";
}else if(type == "leave") {
div.className="cl_add_two";
}
var news = document.getElementsByClassName("cl_new_span")[0];
news.appendChild(div);
}
websocket.onopen = function () {
document.getElementsByClassName("cl_sen_btn")[0].onclick = function () {
var txt =document.getElementsByClassName("cl_sen_txt")[0].value;
if(txt){
websocket.send(txt)
}
}
};
websocket.onclose = function () {
// console.log("onclose")
};
websocket.onmessage = function (e) {
var mes =JSON.parse(e.data);
showMessage(mes.data,mes.type)
};
</script>
</body>
</html>
如果有疑問 聯(lián)系微信：785605726
