socket.io 工具

socket.io和ajax 区别

socket 是基于 websocket  协议的，真正意义上的双向平等对话；WebSocket 协议本质上是一个基于 TCP 的协议。

前后端通过事件进行通信，前后端 都可以发起请求；

ajax  是基于 http 协议的，服务端被动接受浏览器端的请求。实时获取数据 只能轮询。

安装socket.io  服务端

cnpm i socket.io --save

安装socket.io  客户端

cnpm i socket.io-client --save

在server.js 里使 express 和 io关联起来

const app=express();
// 首先拿到 http 对象里的server对象把app封装一层
const server=require("http").Server(app);
// 然后 使用socket.io对象 再把这个对象调用一下 ，这样 整个express就和socket.io关联起来了
const io=require("socket.io")(server);

server.listen(9093,function () {
    console.log("node start")
})

下面把app改为server 这样express 就和 io 成功的绑定起来了；

io主要有2个事件。

1，on 监听一个事件。

2，edit  触发执行一个事件。

//使用io的on方法监听，客户端需要第一次主动（io是全局性的），回调函数的socket参数 就是这个连接的本体；
io.on("connection",function (socket) {
    //发起连接成功打印内容
    console.log("connect success")
})

客户端我们 先引入

import React from "react";
//引入socket.io
import io from "socket.io-client";
class Chat extends React.Component{
  componentDidMount(){
        // 因为我们这里是异步了，所以手动调一下端口好，注意现在是websocket，不是http协议； 
    const socket = io("ws://localhost:9093");
  }
    render(){
        return(<div>
            chat
        </div>)
    }
}
export default Chat;

[nodemon] restarting due to changes...
[nodemon] starting `node server.js`
node start

connect success

node js 页面成功打印出了 预设的内容 现在连接成功

然后前端 去定义socket上约定前后端的事件名，并且传递内容到后端；

//发送消息方法
saveMsg(){
   //使用sock对象去执行发送请求，第一个参数是自定义事件名，第二个参数是传递内容；
    socket.emit("sendmsg",{text:this.state.text});
    // 清空当前state.text
    this.setState({text:""})
}

后端接受

//使用io的on方法（io是全局性的），回调函数的socket参数 就是这个连接的本体；
io.on("connection",function (socket) {
    //发起连接成功打印内容
    console.log("connect success")
    //使用连接成功后的socket的对象 接收到到sendmsg事件传递过来的参数，并且打印他
    socket.on("sendmsg",function (data) {
        console.log(data);
    })

});

然后后端全局 发送 消息

//使用io的on方法（io是全局性的），回调函数的socket参数 就是这个连接的本体；
io.on("connection",function (socket) {
    //发起连接成功打印内容
    console.log("connect success")
    //使用连接成功后的socket的对象 接收到到sendmsg事件传递过来的参数，并且打印他
    socket.on("sendmsg",function (data) {
        console.log(data);
        //全局发送 事件名为resavemsg的 传递的数据；
        io.emit("resavemsg",data);
    })

});

前端监听这个全局事件的数据

socket.on("resavemsg",function (data) {
    console.log(data)
})

这样就实现了一个前后端互动的局面；