聊天室三种写法

• 第一种

  net-socket

const net = require( 'net' ) //引入net模块
const socket = net.Socket() //创建客户端
const host = 'localhost'
const port = 5000 
const readline = require( 'readline') // 读取命令行
// 客户端连接服务器 
socket.connect( port,host, () => {
 socket.write( 'hello' ) // 将一个信息发送给服务器
})
const rl = readline.createInterface({
 input: process.stdin,
 output: process.stdout
});
socket.on('data', msg => { // 客户端通过data事件展示信息，然后发送信息给服务器
 console.log( msg.toString() )
 say()
})
socket.on( 'error', ( error ) => { //处理错误报出
 console.log( 'error is : ' + error )
})
socket.on( 'close', () => { // 客户端正常下线
 console.log( `客户端下线了` )
})
function say () {
 rl.question('请输入：', ( answer ) => {
   if( answer === 'bye' ){
     //表示正常下线 
     socket.destroy() // 客户端销毁
     rl.end() // rl 读取命令行关闭
   }else{
     //表示正常聊天
     socket.write( answer )
   }
 });
}

server

const net = require( 'net' ) //引入net模块
const server = net.createServer() // 创建服务器
const host = 'localhost' // 创建 域名   
const port = 5000 // 创建端口
let count = 0 
const clients = {} 
server.on('connection', ( client ) => { // 服务器通过connection事件连接客户端
  client.name = ++count  // 计数，给每一个客户端起名
  clients[ client.name ] = client // 将每一个客户端放入clients中存储起来
  client.on( 'data', msg => { // 服务器通过data事件来接收客户端发来的信息
    // msg 就是客户端发来的信息 
    console.log( `客户端${ client.name }说：${ msg.toString() }` )
    boardCaster( client,msg )
  })
  client.on( 'error', error => { // 服务器处理错误报出
    console.log( 'error is: ' + error )
  })
  client.on( 'close', () => { // 服务端接收客户端正常下线行为
    delete clients[ client.name ]
    console.log( `客户端${ client.name }下线了` )
  })
})
function boardCaster ( client,msg ) {
  for( var key in clients ){
    clients[ key ].write( `客户端${ client.name }说：${ msg.toString() }` ) // 写信息在服务端
  }
}
// 监听服务器
server.listen( port,host,() => {
  console.log( `服务器运行在: http://${ host }:${ port }` )
})

• 第二种

  socket.io

http
 <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>
    var socket = io.connect('http://10.31.158.70:5000'); //如：'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>
js
直接下载
socket.io.js
只适用于老的浏览器，现在已经不推荐使用了

• 第三种

  webSocket

服务器
const WebSocket = require( 'ws' ) // 引入ws模块
// 创建服务器
// const ws = new WebSocket( options ) options就是一个对象
const ws = new WebSocket.Server({
  port: 5000,
  host: '10.31.158.25'
}) 
let count = 0
const clients = {}
ws.on('connection', client => {
  client.name = ++ count  
  clients[ client.name ] = client 
  client.on('message', msg => { // 服务器通过message事件来接收客户端发来的信息
    // 这里是用的message事件
    console.log( `客户端${ client.name }说：${ msg }` )
    boardCaster( client,msg )
  })
  client.on('close', () => {
    delete clients[ client.name ]
    console.log( `客户端${ client.name } 下线了` )
  })
})
function boardCaster ( client,msg ) {
  // 这里是用的send方法
  for( var key in clients ) {
    clients[ key ].send( `客户端${ client.name }说： ${ msg }` )
  }
}
静态服务器
const express = require( 'express' )
const path = require( 'path' )
const app = express() // app对象的创建是为了绑定中间件 
// 理解： 为了调用中间件（ 函数 ）
const port = 8000 
const host = '10.31.158.25'
// console.log( __dirname ) // 当前文件所在的磁盘路径
app.use( express.static( path.join( __dirname, 'client') ))
app.listen( port,host,() => {
  console.log( `服务器运行在: http://${ host }:${ port }` )
})

连接通信服务器 js

const url = 'ws://10.31.158.25:5000'
const ws = new WebSocket( url )
ws.onopen = () => { //初次连接
  ws.send('我进入了xxx的直播间')
}
ws.onmessage = msg => {
  var content = document.querySelector('#content')
  console.log( msg )
  content.innerHTML += msg.data + '<br/>'
}

http部分

 <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" charset="utf-8"></script>
<script>
    var submit = document.querySelector('#submit')
    var msg = document.querySelector('#msg')
    // submit.onclick = function () {
    //     ws.send( msg.value ) //将信息发送通信服务器
    //     msg.value = ''
    // }
    document.onkeyup = function ( e ) {
        if ( e.keyCode === 13 ) {
            ws.send( msg.value )
            msg.value = ''
        }
    }