node.js通信

最新推荐文章于 2024-04-10 13:37:34 发布

前端xqf

最新推荐文章于 2024-04-10 13:37:34 发布

阅读量284

点赞数

分类专栏： Node.js 文章标签： node.js通信

本文链接：https://blog.csdn.net/weixin_42635130/article/details/90382734

版权

Node.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通信

前端三种通信形式

一种是基于后端的
- 基于net模块的socket
另外两种是基于前端
- H5 提供的 webSocket
- 低版本pc端使用的 socket.io

创建net模块的socket

首先创建一个服务器叫做server

/* 
  服务器： 
    只有一个
    只有开启了服务器，客户端才能进行连接

    基于Node.js   net模块

    socket通信

      接收数据，然后界面展示
*/

const net = require( 'net' )
const server = new net.createServer()
const port = 8000
const hostname = '127.0.0.1'
const clients = {}
let count = 0

server.on( 'connection', ( client ) => { //client就是我们连接的客户端
  client.name = ++count // 计数的思维
  clients[ client.name ] = client     // { 1: client}

  // 服务端接收客户端发来的信息，并且展示在服务终端界面上

  client.on( 'data', ( msg ) => { // msg也可能是发过来的二进制，如果是二进制，那么我们使用 toString()
    console.log( `客户端${ client.name }说：${ msg.toString() }` )

    // 数据展示
    boardcast( client, msg )
  })

  // 处理异常的监听

  client.on( 'error' ,( e ) => {
    console.log( 'error is>' + e )
  })

  // 客户端的正常下线

  client.on( 'close', () => {
    delete clients[ client.name ] // 删除下线的客户端
    console.log( `客户端${ client.name }下线了` )
  })

})

server.listen( port,hostname,() => {
  console.log( `The server is running at: http://${ hostname }:${ port }` )
})

function boardcast ( client, msg ) {
  for( var key in clients ){
    clients[ key ].write( `客户端${ client.name }说：${ msg }` )
  }
}

创建一个socket，连接server，放在client

/* 
  socket
    1. 创建一个socket,然后连接server( url )        net.Socket()
    2. 发送信息给服务器
    3. socket通信
        client可以进行数据的编写和发送
*/
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')
  }
 })
}

创建H5 提供的 webSocke

首先创建client文件夹，放入index.html和wsClient.js文件
在外部先下载ws和express模块
npm i ws -S
npm i express -S
在外部创建socketServer.js和web-server.js文件-
代码如下
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>
<script src="WsClient.js" charset="utf-8"></script>
</head>
<body>
    <h1> 聊天室 </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 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.59'
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.onerror = ( 'error' ) => {
//   console.log( error )
// }


ws.onclose = () => {
  console.log( 'closed' )
}

socketServer.js

/* 
  通信的主服务器
    1. ws模块来创建
    2. 安装 ws 模块
    3. 创建服务器
*/

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

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

/* 
  给client启动一个静态服务器，用于展示界面
*/

const express = require( 'express' )
const path = require( 'path' )
const webPort = 3000
const hostname = '10.31.163.59'

const app = express()

app.use( express.static( path.join( __dirname,'client')) )

app.listen( webPort,hostname, () => {
  console.log( `The web server is running at: http://${ hostname }:${ webPort }`)
})

前端xqf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js通信

通信前端三种通信形式一种是基于后端的基于net模块的socket另外两种是基于前端H5 提供的 webSocket低版本pc端使用的 socket.io创建net模块的socket首先创建一个服务器叫做server/* 服务器：只有一个只有开启了服务器，客户端才能进行连接基于Node.js net模块 s...
复制链接

扫一扫