前端通訊

1. 通訊有兩個端

• 服務端
• 客戶端

1. Node.js提供的通訊方案

//- 客戶端 // 引入net模塊 const net = require( 'net' ) const socket = new net.Socket() // socket是用於鏈接客戶端和服務端 const PORT = 5000 const HOST = '127.0.0.1' socket.connect(PORT,HOST,() => { socket.write('我上線了') // write 是發送給服務端的話 }) 

設置客戶端可見數據

socket.on('data', (msg) => { console.log(msg.toString()); }) socket.on('error', () => { console.log(error) }) 

設置下線退出效果

socket.on('data', (msg) => { console.log(msg.toString()); say() }) socket.on('error', () => { console.log(error) }) socket.on('close', () => { console.log('下線了') }) const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); function say() { rl.question('請輸入', (answer) => { if (answer === '886') { socket.deatroy() rl.close() } else { socket.write(answer); } }) } 

//服務端 const net = require( 'net' ) const PORT = 5000 let count = 0 // 用於客戶端編號，每次鏈接遞增 const clients = {} // cosnt也能定義object類型，用於保存客戶端 // 1. 建立服務器 const server = net.createServer() // 2. 鏈接客戶端 server.on('connection',( client ) => { //socket 就是客戶端 // 觸發條件： 只要有客戶端鏈接服務器就會自動觸發 client.name = ++count clients[ client.name ] = client client.on('data',( msg ) => { //data事件是用來將客戶端的信息展現到服務端 console.log(`${client.name}說:${msg.toString()}`) board(msg.toString()); }) client.on('error', (error) => { console.log(error) }) clinet.on('close', () => { console.log(`${client.name}下線了`) delete clients[client.name] }) }) function board(msg) { for (var key in clients) { clients[key].write(`${key}說：${msg}`) } } // 3. 監聽服務器 server.listen( PORT ) 

2. h5提供的通訊方案
   • 新建一個client文件，裏面建立html文件,設置要表現的效果
   • $ npm i express -S建立依賴
   • 設置一個靜態服務器

const express = require( 'express' ) const app = express() const PORT = 5000 const HOST = '127.0.0.1' const path = require( 'path' ) // 配置靜態資源目錄 // app.use( express.static(目標目錄的磁盤路徑)) app.use( express.static(path.join( __dirname,'client'))) app.get('/',(req,res,next) => { res.send('你好') }) app.listen( PORT,HOST,() => { console.log( `客戶端服務器運行在：http://${ HOST }:${ PORT }` ) }) 

建立socket服務端

//安裝 ws 模塊 $ npm i ws -S //ws 它是H5的一個通訊協議 const WebSocket = require( 'ws' ) const server = new WebSocket.Server({ port: 8000, host: '10.31.153.38' }) const clients = {} let count = 0 server.on('connection',client => { client.name = ++count clients[ client.name ] = client client.on('message', msg => { console.log( msg ) borderCast( msg ) }) client.on('close',() => { console.log(`客戶端${ client.name }下線了`) delete clients[ client.name ] }) }) function borderCast ( msg ) { for ( var key in clients ) { clients[ key ].send(`客戶端${ key }說： ${ msg }`) } } 

在client文件夾裏建立socket客戶端

將該文件連接進html文件內，並寫入事件

const ws = new WebSocket('ws://10.31.153.38:8000') // 發送信息 ws.onopen = () => { ws.send('歡迎') } ws.onmessage = ( msg ) => { // 它是將服務端的信息展現到客戶端 var content = document.querySelector('#content') content.innerHTML += msg.data + '<br/>' } 

<script src="./socketClient.js"></script> <script> var submit = document.querySelector('#submit') var msg = document.querySelector('#msg') submit.onclick = function () { var val = msg.value ws.send( val ) msg.value = '' } </script>