聊天功能插件Socket.io

一、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(,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

巴特西

聊天功能插件Socket.io

最新文章

热门文章