用vue+node+socket.io实现一个最简单的IM

github地址在这里

scoket

首先介绍一下socket的基本知识：socket 原意是“插口”，在网络中每台服务器相当于一间房子，房子中有着不同的插口，每个插口都有一个编号，且负责某个功能。例如充电插口、网线插口、电话插口等。也就是说，使用不同的插口连接到对应的插口，就可以获得对应的服务。其实，插口就是 socket 服务，插口的编号就是端口号，而插头也是一个 socket 服务。

所以，socket 的含义就是两个应用程序通过一个双向的通信连接实现数据的交换，连接的一段就是一个 socket，又称为套接字。实现一个 socket 连接通信至少需要两个套接字，一个运行在服务端（插孔），一个运行在客户端（插头）。

socket.io

socket.io是一个实现实时web通信的JavaScript库。它包含两部分，在浏览器上运行的客户端库和在nodejs上运行的服务器端库。

实现一个小栗子

首先请先保证node环境，再安装以下

npm i express
npm i socket.io

服务端： index.js

var app = require('express')()
var http = require('http').Server(app)
var io = require('socket.io')(http)

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html')
})

io.on('connection', (socket) => {
  console.log('a user connected')

  //响应某用户发送消息
  socket.on('chat message', (msg) => {
    console.log('chat message:' + msg)
    // 广播给所有人
    io.emit('chat message', msg)
  })  

  socket.on('disconnect', () => {
    console.log('user disconnected')
  })
})

// 监听3000端口
http.listen(3000, () => {
  console.log('listening on *:3000')
})

客户端： index.html

methods: {
   // 发送消息
  send () {
    this.socket.emit("chat message", this.message)
    this.message = ''
  }
},
mounted () {
   // 接收消息
   this.socket.on("chat message", (msg) => {
   this.list.push(msg)
})

运行

node index.js

打开多个localhost:3000窗口，发的消息都可以收到，并且没有延迟。能够实现最简单的聊天功能。