Node.js（4）----------------socket（通信）_require('net').connect(sockopts, onconnect); not f-CSDN博客

本文链接：https://blog.csdn.net/qq_41885672/article/details/90381270

1. net的socket

client.js

const net = require('net');
const socket = new net.Socket();

const readline = require('readline'); // 单行读取
const port = 8000;
const hostname = '127.0.0.1';

const rl = readline.createInterface({ // 创建接口，进行信息的读写
    input: process.stdin,
    output: process.stdout
});
// 上线提示信息
socket.connect(port, hostname, () => {
    socket.write('您好~~~');
});
socket.on('data', () => {
    say()
});

// 监听客户端异常
socket.on('error', (e) => {
    console.log('error is>' + e);
});

// 客户端正常下线的提示
socket.on('close', () => {
    console.log('client is closed');
});

function say() {
    rl.question('请输入>', (answer) => {
        if (answer === 'bye') {
            //关闭通信
            socket.destroy();
            rl.end();
        } else {
            socket.write(answer + '\n');
        }
    })
}

server.js

const net = require( 'net' )
const port = 8000
const hostname = '127.0.0.1'

// 定义两个变量， 一个用来计数，一个用来保存客户端

let clients = {}
let clientName = 0

// 创建服务器

const server = new net.createServer()

server.on('connection', ( client ) => {
  client.name = ++clientName // 给每一个client起个名
  clients[client.name] = client // 将client保存在clients

  client.on( 'data', function ( msg ) { //接收client发来的信息
    console.log(`客户端${ client.name }发来一个信息：${msg}`)
  })

  client.on('error', function ( e ) { //监听客户端异常
    console.log( 'client error' + e )
    client.end()
  })

  client.on( 'close', function () {
    delete clients[client.name]
    console.log('客户端下线了')
  })

})

server.listen( port,hostname,function () {
  console.log(`服务器运行在： http://${ hostname }:${ port  }`)
})

2. socket.io（低版本的pc端）

目录结构
server.js

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(__dirname + 'client'))

io.on('connection', function (socket) {
    //广播信息  data  message  receive
    socket.on('receive', (msg) => {
        socket.broadcast.emit('message', msg);
    })
});

server.listen(8081, 'ip地址');

package.json

{
    "dependencies": {
        "express": "^4.16.3",
        "socket.io": "^2.1.1"
    }
}

index.html

<!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>socket.io</title>
<script src="socket.io.js" charset="utf-8"></script>
</head>
<body>
    <h1>gp6 交流区</h1>
    <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000">  </div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
    </div>
    <button id="submit">提交</button>
<script>
    var socket = io.connect('服务器地址'); //如：'http://10.9.164.98:8081'    
    const content = document.getElementById('content')
    document.querySelector('#submit').addEventListener('click', function () {
        var msg2 = msg.value
        socket.emit('receive', msg2)
        msg.value = ''
        content.innerHTML += msg2 + '<br/>'
    }, false)

    socket.on('message', function(msg){
       content.innerHTML += msg + '<br/>'
    })
</script>
</body>
</html>

3. webSocket（h5的功能，多用于移动端）

index.html

<!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>WebSocket</title>
    <link rel="stylesheet" href="./index.css">
    <script src="WsClient.js" charset="utf-8"></script>
</head>

<body>
    <div id="main">
        <h1> 聊天室 </h1>
        <div id="content" name="name"></div>
        <div class="msg-div">
            <input type="text" id="msg">
            <button id="submit">发送</button>
        </div>

    </div>
    <script src="./wsClient.js"></script>
    <script>
        document.querySelector('#submit').addEventListener('click', function() {
            var msg2 = msg.value
            ws.send(msg2)
            msg.value = ''
        }, false)
    </script>
</body>

</html>

wsClient.js

const wsPort = 8080;
const hostname = '10.31.163.47';
const ws = new WebSocket(`ws://${ hostname }:${ wsPort }`);

ws.onopen = () => {
    // 进入聊天室的提示
    ws.send('欢迎xxx来到xxx的直播间');
};
// 接收数据，然后将数据展示到界面上
ws.onmessage = (msg) => {
    const content = document.querySelector('#content');
    content.innerHTML += msg.data + '<br/>';
};
ws.onclose = () => {
    console.log('closed');
};

// 异常报出
ws.onerror = (error) => {
    console.log(error);
}

socketServer.js

const WebSocket = require('ws');
const ws = new WebSocket.Server({ port: 8080, host: '10.31.163.47' });

let clients = {};
let clientName = 0;
ws.on('connection', (client) => {
    client.name = ++clientName;
    clients[client.name] = client;
    client.on('message', (msg) => {
        console.log(msg);
        broadcast(client, msg);
    });
    client.on('close', () => {
        delete clients[client.name];
        console.log(client.name + '离开了直播间');
    })
});

function broadcast(client, msg) {
    for (var key in clients) {
        clients[key].send(client.name + '说：' + msg);
    }
}

web-server.js

const express = require('express');
const path = require('path');
const webPort = 3000;
const hostname = '10.31.163.47';
const app = express();

app.use(express.static(path.join(
    __dirname, 'client'
)));
app.listen(webPort, hostname, () => {
    console.log(`服务器运行在：http://${ hostname }:${ webPort }`)
})

package.json

{
  "dependencies": {
    "express": "^4.17.0",
    "ws": "^7.0.0"
  },
  "devDependencies": {
    "express": "^4.17.0"
  }
}