webSocket入門demo
阿新 • • 發佈：2018-11-03
總結:如甲方定義了事件(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>