【Node.JS和Socket.io】多人在线实时服务器
本帖最后由 hwx145 于 2022-4-1 12:03 编辑1.去官网http://nodejs.cn/ 下载最新的nodejs安装完成后
2.进入你的工作目录
1. cmd
2. cd D:\多人在线实时服务器
3.接下来使用npm命令安装express和socket.io(第一次运行就行,会生成node_modules文件夹))
npm install --save express
npm install --save socket.io
安装成功后，看到工作目录下生成了一个名为node_modules的文件夹
4.接下来可以开始编写服务端的代码了，新建一个文件：index.js
const express=require('express');
const app=express();
const fs=require('fs');
const port = 3000;
app.get('/', function(req, res){
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.write(fs.readFileSync('./public/index.html'))
res.end();
});
app.use(express.static(__dirname+'/public'))
console.log("Server Running At:localhost:"+port);
var io=require('socket.io')().listen(app.listen(port,()=>{console.log('listening on *:3000');}));
io.sockets.on('connection',function(socket){
socket.emit("Start_Chat");
socket.on("Register_Name",function(data){
socket.Register_Name=data;
io.sockets.emit("r_name","<strong>"+data+"</strong> Hat Joined The Chat");
socket.on("Send_msg",function(data){
io.sockets.emit("msg",data);
})
})
socket.on('disconnect', function(){
if(socket.Register_Name){
io.sockets.emit("msg","<strong>"+socket.Register_Name+"</strong> disconnect");
}
});
})
5.客户端代码public/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script src="socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p id="stat"><strong>Status</strong>Not Connected</p>
<h2>Socket.io Chat Tutorial</h2>
<ul>
</ul>
<input id="field" placeholder="Wait...." type="text"></input>
<input type="button" value="Go" id="btn"></input>
<script>
var socket=io.connect(window.location.host);
socket.on("Start_Chat",function(){
$("#stat").html("<strong>Status</strong>Connected");
$("#field").attr("placeholder","Your Name..");
$("#field").focus();
})
socket.on("disconnect",function(){
$("#stat").html("<strong>Status</strong>Disconnected From Server Refresh!");
})
$("#btn").click(function(){
if($("#field").attr("placeholder")=="Your Name.."){
socket.emit("Register_Name",$("#field").val());
$("#field").attr("data-name",$("#field").val());
$("#field").val("");
$("#field").attr("placeholder","Your Text..");
}else if($("#field").attr("placeholder")=="Your Text.."){
var thisname=$("#field").attr("data-name");
socket.emit("Send_msg","<strong>"+thisname+"</strong>:"+$("#field").val());
$("#field").val("");
$("#field").focus();
}else{
alert("Wait");
}
})
socket.on("r_name",function(data){
$("ul").append("<li>"+data+"</li>");
})
socket.on("msg",function(data){
$("ul").append("<li>"+data+"</li>");
})
function onUnloadFun(){
if(socket){
socket.disconnect();
}
}
</script>
Hello Node Server Routing Is Working.
</body>
</html>
6.命令行运行node index.js，如果一切顺利，你应该会看到返回的listening on *:3000字样
5.打开http://127.0.0.1:3000/ 看到正常的欢迎页面恭喜你，成为初级高手会多人在线实时服务器的开发了。
Has Joined The Chat:lol 局域网内聊天室？是不是这样的？ 有点意思，几个小伙伴用浏览器say helllo。
页:
[1]