websocket 一種通信協定
ajax/jsonp 單工通信
websocket 全雙工通信 性能高 速度快
2種方式：
1、前端的websocket
2、後端的 socket.io
一、後端socket.io
cnpm i socket.io
接收on 發送emit ——可以發送任意類型的資料
後端：
1、建立httpServer
2、建立wsServer var ws = io(httpServer);
3、連接配接
ws.on("connect",function(socket){
//45 發送或者接收
發送 socket.emit("名稱"，資料);
廣播 socket.broadcast.emit("名稱"，資料);
接收 socket.on(名稱，function(data——資料){
});
});
前端：
1、引入js src="/socket.io/socket.io.js"
2、連接配接
var ws = io("ws://ip:port");
3、發送接收 on/emit
聊天室：
chat.html
無标題文檔
*{padding:0;margin:0;list-style:none;}
#div1{ position:relative;width:500px; height:400px; border:1px solid red;}
#text{ position:absolute;left:0;bottom:0;width:80%; height:100px;}
#btn1{ position:absolute;right:0;bottom:0;width:20%; height:100px;}
#ul1{width:100%; height:300px; background:#ccc; overflow-y:auto;}
#ul1 li{ line-height:30px; border-bottom:1px dashed red;}
//var ws = io("ws://10.30.155.92:9000");
//var ws = io("http://10.30.155.92:9000");
//var ws = io();
var ws = io.connect("ws://10.30.155.92:9000");//标準寫法 ws://
window.onload = function(){
var oUl = document.getElementById("ul1");
var oText = document.getElementById("text");
var oBtn = document.getElementById("btn1");
var name = prompt("請輸入你的使用者名")//"張三";
oBtn.onclick = function(){
//發送資料
var data = {name:name,value:oText.value};
ws.emit("msg",data);
createLi(data);
};
//接收資料 1建立dom
ws.on("msg_all",function(data){
console.log(data);
createLi(data);
});
function createLi(data){
//建立dom
var oLi = document.createElement("li");
oLi.innerHTML = `${data.name} ${data.value}`;
oUl.appendChild(oLi);
oUl.scrollTop = oUl.scrollHeight;
}
};
chat.js
var http = require("http");
var io = require("socket.io");
var fs = require("fs");
//建立http服務
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//建立websockt服務
var ws = io(httpServer);
ws.on("connection",function(socket){
console.log("wsServer");
//接收資料
socket.on("msg",function(data){
console.log(data);
//發送資料廣播
socket.broadcast.emit("msg_all",data);
});
});
前端H5 WebSocket
ws: http
wss:https
前端配置:
var ws = new WebSocket("ws://ip:port");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
後端：npm i ws
npm i ws
var wss = new WebSocket({server:httpServer});
wss.on("connection",function(ws,req){
發送 接收
接收
ws.onmessage(function(ev){
//資料 ev.data
});
發送：
ws.send(資料);
資料 最好隻能是字元串！！！
});
exp:
h5.html
無标題文檔
var ws = new WebSocket("ws://localhost:9000");
//建立連接配接
ws.onopen = function(ev) {
console.log("連接配接成功");
};
//接收資料
ws.onmessage = function(ev) {
console.log( "接收資料",ev.data);//server--->client
//發送資料
//ws.send("client--->server");
try{
//隻處理json
var json = JSON.parse(ev.data);
console.log(json);
if(json.type == "click"){
var oSpan = document.getElementById("s1");
oSpan.innerHTML = json.value;
}
}catch(e){
}
};
//連接配接關閉
ws.onclose = function(evt) {
console.log("連接配接關閉");
};
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//發送資料 隻能發送字元串
ws.send(JSON.stringify({type:"click",value:"abc"}));
};
}
h5 WebSocket
1111
h5.js:
var http = require("http");
var WebSocket = require("ws");
var fs = require("fs");
//建立http服務
var httpServer = http.createServer(function(req,res){
var url = req.url;
fs.readFile("www"+url,function(err,data){
if(err){
res.end("404");
} else {
res.end(data);
}
});
});
httpServer.listen(9000);
//建立websockt服務
var wss = new WebSocket.Server({ server:httpServer });
wss.on('connection', function connection(ws) {
console.log("wsServer");
//發送 send
ws.send("server--->client");
//接收
ws.on('message', function(message) {
console.log(message);
//ws.send(message);
//廣播
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
愛我所愛無怨無悔