博客

socket的通讯流程

  • Post author:
  • Post category:其他




socket的通讯流程

  • 服务器端（电话的一端，接听电话者）：

  • 1、创建socket，表示有了一个电话

  • 2、绑定socket和端口号，相当于，电话对应了一个电话号码

  • 3、监听端口号，相当于，把电话插上电话线，可以随时等待有人拨通电话

  • 4、接收客户端的连接请求，相当于有人打来了电话

  • 5、从socket中读取字符，相当于，接起电话，有语音信息传输过来了

  • 6、关闭socket，相当于通话完成后，挂掉电话

  • 客户端：

  • 1、 创建socket，表示有了一个电话（当然也默认绑定了端口号）

  • 2、连接指定的计算机端口（服务器的地址和端口），相当于拨打电话

  • 3、向socket中写入信息，相当于给对方说话 4、关闭socket，相当于通话完成后，挂掉电话



基于net模式实现

安装ws模块（webSocket） npm i ws

 使用node 的express和socket.io 
 安装express 
 安装socket.io 
npm i express socket.io 
 前端代码需要引入“socket.io.js


let webSocketServer = require("ws").Server;

// 创建服务器端socket
let ws = new webSocketServer({port:9000});

let clients = [];
// 给ws绑定连接事件（connection）
// connection的触发时机：有客户端连接了
ws.on("connection",function(client){
    console.log("connection被触发了");
    // client:就是客户端对象
    // 1、把该对象保存起来
    clients.push(client);
    // message事件的触发时机是：client对象send()时
    client.on("message",function(str){
        // 服务器收到客户端发了的消息（str），把它分发给其它客户端
        console.log("str:",str);
        broadcast(str);
    });
})

function broadcast(str){
    clients.forEach(item=>{
        // item是所有连接的客户端。
        // 需要给所有的客户端发送信息
        item.send(str);
    });
}


// 创建客户端socket
let clientSocket = new WebSocket("ws://127.0.0.1:9000"); //这句话执行时，会触发服务器端socket的connection事件。

// 连接成功了，就会触发onpen事件
clientSocket.onopen = function(){
    clientSocket.send("大家好");
}

let oChatRoom = document.getElementById("chatroom");

// 服务器端调用send函数会触发onmessage
clientSocket.onmessage = function(event){
    oChatRoom.innerHTML += event.data+"<br/>";//event.data是服务器端发了的数据
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>WebSocket</h1>
        <div id="chatroom"
             style="width:400px;height:300px;overflow:auto;border:1px solid blue">
    
        </div>
        <input type="text"  id="sayinput" value="">
        <input type="button" name="send" id="sendbutton" value="发送">
          
</body>
</html>

<script src="WsClient.js" charset="utf-8"></script>
<script type="text/javascript">


 let oText = document.getElementById("sayinput");
  function send() {
        clientSocket.send(oText.value);  //客户端发送信息给服务器端
        oText.value = '';
  }

  document.getElementById("sendbutton").onclick = function () {
      send();
  }

  document.onkeyup = function (event) {
    if (event.keyCode == 13) {
        send();
    }
  }



socket.io

如果浏览器不支持HTML5，即没法直接使用websocket。我们还需要使用 socket.io来考虑兼容性。即，如果支持HTML5，就用websocket，如果不支持 HTML5就使用socket.io。Socket.io使用检测功能来判断是否建立WebSocket连 接。Socket.IO还提供了一个NodeJS API  使用node 的express和socket.io  安装express  安装socket.io npm i express socket.io  前端代码需要引入“socket.io.j

var app = require('http').createServer(function(req, res) {})

var io = require('socket.io').listen(app) //把socket.io和web服务器关联起来

app.listen(706); //监听端口号


//保存所有的客户端
var clients = {};

io.sockets.on('connection', function (socket) {

    console.log("connection被触发了");
    //有客户端连接，发送消息 (f 是自定义事件)
    socket.on('f', function (sayer, fn) {
        //如果没有保存改客户端，那么就保存该客户端
        if(!clients[sayer]){
            clients[sayer] = this;
        }
        console.log(clients);
        fn();
    });

    socket.on('message', function (data) {
        console.log("message被触发了");
        broadcast(data);
     });

     function  broadcast(data){
         for(let key in clients){
              //给客户端发送消息，使用事件，emit触发事件 news	
            clients[key].emit('news',data);
         }
     }
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>WebSocket</h1>
        <div id="chatroom"
             style="width:400px;height:300px;overflow:auto;border:1px solid blue">
        </div>
        <input type="text"  id="sayer" value="">说：
        <input type="text"  id="sayInput" value="">
        <input type="button" name="send" id="sendbutton" value="发送">
</body>
</html>

<script src="./js/socket.io.js"></script>
<script type="text/javascript">

sayer.value = "游客"+Date.parse((new Date()).toUTCString());


// 创建对象，并连接服务器端（触发服务器端的connection事件）
let socket  = io.connect("http://10.35.166.26:706");
// 连接事件
socket.on("connect",function(){
    console.log("connect");
    // 连接建立起来后，打个招呼
    socket.emit('f',sayer.value, function () {
        socket.send(sayer.value+"说：hello ！"); //send函数触发的是服务器端message事件
    });
});

socket.on("news",function(data){
    console.log("news被触发了");
    chatroom.innerHTML += data+"<br/>";
})

sendbutton.onclick = function(){
    socket.send(sayer.value+"说："+sayInput.value); 
    sayInput.value="";
}

</script>


版权声明：本文为yang_web原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。