一、Socket.io是什麼

　　是基於時間的實時雙向通訊庫

　　基於websocket協議的

　　前後端通過時間進行雙向通訊

　　配合express快速開發實時應用

二、Socket.io和ajax區別

　　基於不同的網路協議

　　ajax基於http協議，單向，實時獲取資料只能輪詢

　　socket.io基於websocket雙向通訊協議，後端可以主動推送資料

　　現代瀏覽器均支援websocket協議（不必擔心相容問題）

如何安裝socket.io

　　npm install socket.io --save (後端)

      npm install socket.io-client --save（前端）

配合express（後端API）（只是順帶說一下不詳解）

　　*io=require('socket.io')(http)

　　*io.on 監聽事件

　　*io.emit觸發事件

　　如下程式碼

.....
const app = express()
// work with express
const server = require('http').Server(app)

const io = require('socket.io')(server)

io.on('connection',function(socket){
    console.log(
 
'user login')
    socket.on('sendmsg',function(data){   //*************接收
        console.log(data)
        const {from, to, msg} = data
        const chatid = [from,to].sort().join('_')
        Chat.create({chatid,from,to,content:msg},function(err,doc){
            io.emit('recvmsg', Object.assign({},doc._doc)) //傳送到全域性
        })
        
 
// console.log(data)
        // io.emit('recvmsg',data)
    })
})
....
server.listen(9093,function(){
    console.log('Node app start at port 9093')
})

配合express（前端API）

　　*Import io from 'socket.io-client'

　　*io.on 監聽事件

　　*io.emit 觸發事件

前端傳送訊息

import React from 'react'
import {List,InputItem,NavBar,Icon, Grid} from 'antd-mobile'
import io from 'socket.io-client'
const socket = io('ws://localhost:9093')

class Chat extends React.Component{
        constructor(props){
           super(props)
           this.state={text:''}
        }
    componentDidMount(){
       socket.on('recvmsg',(data)=>{
　　　　　　this.setState({
　　　　　　　　msg:[...this.state.msg,data.text]
　　　　　　})　　
　　　　})
    }
    handleSubmit(){
            socket.emit('sendmsg',{text:this.state.text})
            this.setState({text:''})
        }
    render(){
               <div>
                     {
　　　　　　　　　　　　　　this.state.msg.map(v=>{
　　　　　　　　　　　　　　　　return <p key={v}>{v}</p>
　　　　　　　　　　　　　　})
　　　　　　　　　　　　　}
                         <List>
                               <InputItem
                                       placeholder='請輸入'
                                       value={this.state.text}
                                       onChange={v=>{
                                           this.setState({text:v})
                                       }}
                                       extra={<span onClick={()=>this.handleSubmit()}>傳送</span>}
                               >
                               資訊
                               </InputItem>
                         </List>
                   </div>
        )
    }
}

export default Chat