1.安装node。安装依赖
2.安装websocket 模块依赖 命令为：npm install nodejs - websocket
3.安装完依赖
4.建立index.js复制以下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 + '进入了聊天';
broadcast(JSON.stringify(mes));
// broadcast(conn.nickname + '进来');
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('连接已关闭');
// 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复制一下内容。
<!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="说点啥。。。" />
<div class="cl_sen_btn">发送</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>
WeChatf7a3580523d6f53c090e97a7479c1d48.png
如果有疑问 联系微信：785605726
网友评论