WebSocket: 是一种网络通信协议，一般用于消息推送。
Nodejs: 是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境
项目结构
websocketpic.jpeg
1.安装nodejs-websocket
npm install nodejs-websocket
2.服务端代码：新建一个server.js
var ws = require("nodejs-websocket")
var port=3101;
var user=0;
// 创建一个连接
var server = ws.createServer(function (conn) {
console.log("创建一个新的连接--------");
user++;
conn.nickname="user" + user;
var mes = {};
mes.type = "enter";
mes.data = conn.nickname + " 进来啦"
broadcast(JSON.stringify(mes));
//向客户端推送消息
conn.on("text", function (str) {
console.log("回复 "+str)
mes.type = "message";
mes.data = conn.nickname + " 说: " + str;
broadcast(JSON.stringify(mes));
});
//监听关闭连接操作
conn.on("close", function (code, reason) {
console.log("关闭连接");
mes.type = "leave";
mes.data = conn.nickname+" 离开了"
broadcast(JSON.stringify(mes));
});
//错误处理
conn.on("error", function (err) {
console.log("监听到错误");
console.log(err);
});
}).listen(port);
function broadcast(str){
server.connections.forEach(function(connection){
connection.sendText(str);
})
}
3.客户端代码： 新建一个index.html
<body>
<h1>基于NodeJs的websocket简易聊天 </h1>
<div id="app">
<input id="sendMsg" type="text"/>
<button id="submitBtn">发送</button>
</div>
</body>
<script type="text/javascript">
//在页面显示聊天内容
function showMessage(str,type){
var div=document.createElement("div");
div.innerHTML=str;
if (type=="enter"){
div.style.color="blue";
}else if(type=="leave"){
div.style.color="red";
}
document.body.appendChild(div);
}
//新建一个websocket
var websocket=new WebSocket("ws://localhost:3101");
//打开websocket连接
websocket.onopen=function(){
console.log('已经连上服务器----')
document.getElementById("submitBtn").onclick=function(){
var txt=document.getElementById("sendMsg").value;
if(txt){
//向服务器发送数据
websocket.send(txt);
}
}
}
//关闭连接
websocket.onclose=function(){
console.log("websocket close");
}
//接收服务器返回的数据
websocket.onmessage=function(e){
var mes=JSON.parse(e.data)
showMessage(mes.data,mes.type);
}
</script>
4.启动服务
node server.js
5.打开静态页面进行聊天
客户端输出：
websocketpic2.jpeg
服务端输出：
websocketpic3.jpeg
