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)
})

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

socket.io 工具相关推荐

记一次Socket.IO长链服务的性能压测
网易云信IM系统中的Web版使用了Socket.IO实现浏览器环境下的长链服务:区别于常规的长链服务,为该服务的压测提出了一些新的挑战,本文总结了测试过程中的一些收获供参考. Part1 测试工具选项 ...
在线白板，基于socket.io的多人在线协作工具
为什么80%的码农都做不了架构师?>>> 首发:个人博客,更新&纠错&回复是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上 ...
Socket接口测试工具 (socket.io.js)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...
koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架
一.基本介绍 WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯.而Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket ...
调用ice服务器_Nodejs+socket.io搭建WebRTC信令服务器
前言我们在学习 WebRTC 时,首先要把实验环境搭建好,这样我们就可以在上面做各种实验了. 对于 WebRTC 来说,它有一整套规范,如使它使用的接口.使用SDP进行媒体协商.通过ICE收集地址并 ...
使用React，TypeScript和Socket.io构建聊天应用
This is going to be a thorough step-by-step guide for building a single page chat application using ...
使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

socket.io 工具

socket.io 工具相关推荐

最新文章

热门文章