socket通信的三种实现方式

三种 socket 的实现方式

nodejs 下的 socket

服务端代码

const net = require('net')
const server = net.createServer()

// 存储客户端对象
let clients = {}
let clentName = 0

server
    .on('connection', client => {
        client.name = ++clentName
        clients[client.name] = client

        client
            .on('data', msg => {
                // 接受到客户端数据 广播数据
                broadcast(client, msg)
            })
    })

    .listen(3000);

function broadcast(client, msg) {
    for (let name in clients) { //向每个在线的客户端广播数据
        clients[name].write(client.name + " says: " + msg) //发送数据使用 write 方法
    }
}

客户端代码

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

socket
    .connect(3000, 'localhost', () => {
        socket.write('hello1') //使用 write 方法发送消息

    })
    .on('data', msg => { //接收服务端消息
        console.log(msg.toString());
    })

WebSocket

服务端代码

const Ws = require('ws')
const ws = new Ws.Server({ //设置服务器地址
    port: 3000,
    host: 'localhost'
})

let clients = {}
let clientName = 0

ws.on('connection', client => {
    client.name = ++clientName
    clients[client.name] = client

    client.on('message', msg => { //监听 message 事件
        broadcast(client, msg)
    })
})

function broadcast(client, msg) {
    for (let name in clients) {
        clients[name].send(client.name + ' says: ' + msg) //使用send方法发送消息
    }
}

客户端代码

const Ws = require('ws') // ie10+ 自带 WebSocket 对象
const ws = new Ws('ws://localhost:3000') //设置请求地址 scheme 为 ws

ws
    .on('open', () => { //连接成功
        ws.send('hello1') //使用 send 方法向服务端发送消息
    })

    .on('message', msg => { //监听 message 事件接收服务端消息
        console.log(msg);
    })

socket.io

服务端代码

const path = require('path')
const ejs = require('ejs')
const http = require('http')
const express = require('express')
const IO = require('socket.io')

const app = express()
const server = http.createServer(app)
const io = IO(server)

io
    .on('connection', socket => { // 有客户端接入
        console.log('a user connected');

        socket
            .on('disconnect', () => {
                console.log('a user disconnect');
            })
            .on('chat message', msg => { // 接收客户端消息 可自定义事件名
                console.log('msg:', msg.toString());
                io.emit('chat message', msg) // 向所有客户端发送消息
                // socket.broadcast.emit('chat message', msg) // 向除此 socket 外的所有客户端广播消息

            })
    })

app
    // 设置模版引擎
    .set('views', path.join(__dirname, './view'))
    .engine('html', ejs.renderFile)
    .set('view engine', 'html')
    // 渲染页面
    .use('/', require('./router/view'))

server
    // 设置服务器地址
    .listen(3000)

客户端代码

let socket = io() // 创建 socket 对象 需引入 socket.io.js
$('button').on('click',()=>{
    socket.emit('chat message', $('#m').val())//发送消息
    $('#m').val('')
})
socket
    .on('chat message', msg=>{ //接收客户端广播消息
        console.log(msg);
        $('#messages').append($('<li>').text(msg))
    })

三种实现方式的比较

• nodejs 下的 socket
  
  需引入 nodejs 自带的 net 模块，浏览器端不可以直接使用

• WebSocket
  
  大部分浏览器可直接使用，但 ie9 及其以下不兼容

• socket.io
  
  可在浏览器使用，且兼容大部分浏览器，需引入 socket.io.js 文件