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