websocket 一种通信协议
ajax/jsonp 单工通信
websocket 全双工通信 性能高 速度快
2种方式：
1、前端的websocket 2、后端的 socket.io 一、后端socket.iohttps://socket.io/
安装: cnpm i socket.io
接收on 发送emit ——可以发送任意类型的数据
后端：
1、创建httpServer
2、创建wsServer var ws = io(httpServer);
3、连接
前端：
1、引入js src="http://www.likecs.com/socket.io/socket.io.js"
2、连接
var ws = io("ws://ip:port");
3、发送接收 on/emit
chat.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{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;} </style> <!--<script src="http://www.likecs.com/socket.io/socket.io.js"></script>--> <script src="http://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script> <script>//http://10.30.155.92 //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 = `<strong>${data.name}</strong> <span>${data.value}</span>` ; oUl.appendChild(oLi); oUl.scrollTop = oUl.scrollHeight; } }; </script> </head> <body> <div> <ul> <!--<li><strong>张三</strong> <span>聊天内容</span></li>--> </ul> <textarea></textarea> <input type="button" value="发送"/> </div> </body> </html> 前端H5 WebSocketws: http
wss:https
https://www.npmjs.com/package/ws
var wss = new WebSocket({server:httpServer}); wss.on("connection",function(ws,req){ 发送 接收 接收 ws.onmessage(function(ev){ //数据 ev.data }); 发送： ws.send(数据); 数据 最好只能是字符串！！！ });==exp:==
h5.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> 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"})); }; } </script> </head> <body> h5 WebSocket <input type="button" value="发送"/><span>1111</span> </body> </html> 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); } }); }); }); 爱我所爱无怨无悔