webSocket入门demo

总结:如甲方定义了事件(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>

猜你喜欢