天天看點
傳回

9、socket.io,websocket 前後端實時通信,(聊天室的實作)

websocket 一種通信協定

ajax/jsonp 單工通信

websocket 全雙工通信 性能高 速度快

2種方式：

1、前端的websocket 2、後端的 socket.io

一、後端socket.io

https://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

<!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

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);
            }
          });
                      
          
      }); 
});

愛我所愛無怨無悔

更多專業前端知識，請上 【猿2048】www.mk2048.com

前端 node.js 聊天室 即時通信 socket.io websocket
上一篇: python語句塊标記_Python基礎文法學習筆記
下一篇: 基于.Net Core3.1 與signalR實作一個即時通訊工具（一）1. 什麼是signalR?2. 什麼時候需要signalR?3. 市面上很多這樣的工具，為什麼還要再寫一個呢？4. 開發工具：5. 話不多說 上demo。總結：本篇主要介紹signalR及demo展示，下篇開始正式進入實戰！

繼續閱讀