前端通信方式
基于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. name = ++ count
clients[ client. name ] = client
client. on ( 'data' , ( msg ) => {
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( url ) net.Socket() 发送信息给服务器 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 webSocket
目录如下 通信主服务器,socketServer
const WebSocket = require ( 'ws' )
const ws = new WebSocket. Server ( {
port: 8080 ,
host: '10.31.163.45'
} )
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)
}
}
const wsport = 8080
const hostname = '10.31.163.45'
const ws = new WebSocket ( `ws:// ${ hostname } : ${ wsport } ` )
ws. onopen = ( ) => {
ws. send ( '欢迎您来到我的直播间' )
}
ws. onmessage = ( msg ) => {
const content = document. querySelector ( '#content' )
content. innerHTML += msg. data + '<br/>'
}
ws. onclose = ( ) => {
console. log ( 'closed' )
}
const express = require ( 'express' )
const path = require ( 'path' )
const webport = 3000
const hostname = '10.31.163.45'
const app = express ( )
app. use ( express. static ( path. join ( __dirname, 'client' ) ) )
app. listen ( webport, hostname, ( ) => {
console. log ( `The server is running at: http:// ${ hostname} : ${ webport} ` )
} )
< ! 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> chat room < / h1>
< div id= "content" name= "name" style= "overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000;color:pink;" > < / div>
< br / >
< div>
< input type= "text" id= "msg" style= "width: 200px;" >
< / div>
< button id= "submit" style= "background:red" > 提交< / 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>