总结:如甲方定义了事件(on),乙方就能通过调用(emit)来此事件给甲方传参
这里使用原生组件fs和http开启服务,并渲染页面。
若要上传图片之类的插件需要实例化,请务必在post提交方法内实例化!!否则会多次请求
需要下载socket.io插件: npm install --save socket.io
index.js
/**
* 用原生组件开启网络服务,用socket.io前后端交互,要注意监听的顺序
*/
var http=require("http");
var fs=require("fs");
//开启服务
var server=http.createServer(function(req,res){
//进入默认页面,方便测试也只写一个页面
if (req.url=="/") {
//相当于express里的router把页面渲染出来,这里用fs读取,用res.end渲染
fs.readFile("./socket.html",function(err,data){
res.end(data);
})
}
})
//开启服务
server.listen(3000);
//导入socket.io组件,并监听
var io=require("socket.io").listen(server);
//一旦有连接就会进入这个方法
io.on("connection",function(socket){
//这里的socket参数就类似events组件
socket.addListener("QianDuan",function(dt){
console.log("这是前台传过来的参数"+dt);
if(dt!=null){
//调用前端定义的事件,传参给前端
socket.emit("HouTai","给前端的参数哈哈");
}
});
})
socket.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>首页</h1>
<input type="text" id="msg" placeholder="给后台的数据"/>
<button onClick="toHou()">给后台的文本</button>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket=io();
function toHou(){
let dd=document.getElementById("msg").value;
//调用后台配置的事件方法,把参数传给后台
socket.emit("QianDuan",dd);
}
//前端也配置一个事件给后台传参,只能用on(暂定)
socket.on("HouTai",function(dt){
alert(dt);
})
</script>
</body>
</html>
聊天室demo(即时通信)
插件:express ejs socket.io
index.js
var express=require("express");
var app=express();
var http=require("http");
var router=require("./router.js");
var bodyparser=require("body-parser");
app.use(bodyparser.urlencoded({extended:false}));
//配置ejs模板
app.set("view engine","ejs");
app.set("views",__dirname+"/ejs");
//由于不能直接用Express只能把实例化后的给原生的http组件
let server=http.createServer(app);
server.listen(3000);
app.get("/",router.index);
app.get("/chat",router.liaotian);
//导入socket.io,并监听server
var io=require("socket.io").listen(server);
io.on("connection",function(socket){
//聊天室,定义一个事件给前台传数值到后台,后台再调用前台事件把值传回去。做到全部人都能看到此记录
socket.on("getHouTaiData",function(dt){
//调用前台配置的事件,把值传给前台(是全部的前台,多个用户)
io.emit("toQianTaiData",dt);
})
})
路由的js
/**
* 路由页面
*/
/*var express=require("express");
var app=express();
app.set("view engine","ejs");
app.set("views",__dirname+"/ejs");*/
var url=require("url");
//首页页面
exports.index=function(req,res){
res.render("index");
};
//聊天室页面char
exports.liaotian=function(req,res){
let parseUrl=url.parse(req.url,true);
let user=parseUrl.query.username;
res.render("char1",{username:user});
}
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/chat">
<p>输入昵称:<input type="text" name="username">
<input type="submit" value="进入"/></p>
</form>
</body>
</html>
char1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/socket.io/1.4.0/socket.io.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<h1>欢迎:课工场</h1>
<div>
<ul id="ul1"></ul>
</div>
<div><input type="text" id="talkmsg"></div>
<script type="text/javascript">
var socket=io();
//全局键盘监听事件
$(document).keydown(function(event) {
if (event.keyCode==13) {
//用户名
let name='<%=username%>';
//输入框内的值
let msg=$("#talkmsg").val();
let zuhe=name+":"+msg;
socket.emit("getHouTaiData",zuhe);
}
});
//给后台调用的方法:作用是传值
socket.on("toQianTaiData",function(dt){
let xx="<li>"+dt+"</li>"
$("#ul1").append(xx);
})
</script>
</body>
</html>