zoukankan      html  css  js  c++  java
  • 聊天功能插件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(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
  • 相关阅读:
    【LeetCode】17. Letter Combinations of a Phone Number
    【LeetCode】16. 3Sum Closest
    【LeetCode】15. 3Sum 三个数和为0
    【LeetCode】14. Longest Common Prefix 最长前缀子串
    【LeetCode】13. Roman to Integer 罗马数字转整数
    【LeetCode】12. Integer to Roman 整型数转罗马数
    【LeetCode】11. Container With Most Water
    【LeetCode】10. Regular Expression Matching
    Models of good programmer
    RSA Algorithm
  • 原文地址:https://www.cnblogs.com/wenbodeboke/p/10019462.html
Copyright © 2011-2022 走看看