九、socket.io,websocket 先後端實時通訊,(聊天室的實現)

時間 2019-11-07

標籤 socket.io socket websocket 後端實時通訊聊天室實現欄目系統網絡简体版

原文原文鏈接

websocket 一種通訊協議css

ajax/jsonp 單工通訊html

websocket 全雙工通訊性能高速度快前端

2種方式：git

一、前端的websocket

二、後端的 socket.io

demo地址：githubgithub

1、後端socket.io

https://socket.io/
安裝:web

cnpm i socket.ioajax

接收on 發送emit ——能夠發送任意類型的數據npm

後端：json

一、建立httpServer
二、建立wsServer var ws = io(httpServer);
三、鏈接後端

ws.on("connect",function(socket){
        
        //45  發送或者接收  
        發送  socket.emit("名稱"，數據); 
        廣播  socket.broadcast.emit("名稱"，數據); 
        接收  socket.on(名稱，function(data——數據){
            
              });
   
   });

前端：
一、引入js src="/socket.io/socket.io.js"
二、鏈接
var ws = io("ws://ip:port");
三、發送接收 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="/socket.io/socket.io.js"></script>-->
<script src="https://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 id="div1">
    <ul id="ul1">
        <!--<li><strong>張三</strong> <span>聊天內容</span></li>-->
    </ul>
    <textarea id="text"></textarea>
    <input id="btn1" type="button" value="發送"/>
</div>
</body>
</html>

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

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 id="btn1" type="button" value="發送"/><span id="s1">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);
            }
          });
                      
          
      }); 
});

愛我所愛無怨無悔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。