socket.io.js聊天室
安装node.js
1.搭建框架
var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.io
var app=new express();
var server=http.createServer(app);
var io=new socketIo(server);//将socket.io注入express模块
//客户端 1 的访问地址
app.get("/client1",function (req,res,next) {
res.sendFile(__dirname+"/views/client1.html");
});
//客户端 2 的访问地址
app.get("/client2",function (req,res,next) {
res.sendFile(__dirname+"/views/client2.html");
});
server.listen(9009);//express 监听 8080 端口,因为本机80端口已被暂用
//每个客户端socket连接时都会触发 connection 事件
io.on("connection",function (clientSocket) {
// socket.io 使用 emit(eventname,data) 发送消息,使用on(eventname,callback)监听消息
//监听客户端发送的 sendMsg 事件
clientSocket.on("sendMsg",function (data) {
// data 为客户端发送的消息,可以是 字符串,json对象或buffer
// 使用 emit 发送消息,broadcast 表示 除自己以外的所有已连接的socket客户端。
clientSocket.broadcast.emit("receiveMsg",data);
})
});
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客户端1</title>
</head>
<body>
<label>聊天内容:</label><br/>
<textarea id="content" style="height: 200px; width:300px;"></textarea>
<br/>
<input id="sendMsg" type="text"/>
<button id="btn_send">发送</button>
<!-- 首先引入 socket.io 客户端脚本-->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();//连接服务端,因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
// 监听 receiveMsg 事件,用来接收其他客户端推送的消息
socket.on("receiveMsg",function (data) {
content.value+=data.client+":"+data.msg+"\r\n";
});
var content=document.getElementById("content");
var sendMsg=document.getElementById("sendMsg");
var btn_send=document.getElementById("btn_send");
btn_send.addEventListener("click",function () {
var data={client:"客户端1",msg:sendMsg.value};
//给服务端发送 sendMsg事件名的消息
socket.emit("sendMsg",data);
content.value+=data.client+":"+data.msg+"\r\n";
sendMsg.value="";
});
</script>
</body>
</html>
cmd 在项目文件夹下执行命令
npm install -g express-generator
npm install socket.io
npm install express
执行node server.js启动服务