1.前端引入socket.io.js 下载地址:https://pan.baidu.com/s/1DcTTPkDEvqD2CayoFA1F4A 提取码:5umb
或者通过 CDN 的形式引入。<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
2.node 端安装 npm i socket.io模块
3.具体代码和用法如下:
1) index.js
var http=require("http");;//引入http var socketIo=require("socket.io");//引入socket.io var server=http.createServer(app); var io=new socketIo(server); //客户端 的访问地址 server.listen(8080);//express 监听 8080 端口 //每个客户端socket连接时都会触发 connection 事件 io.on("connection",function (clientSocket) { // socket.io 使用 emit(eventname,data) 发送消息,使用on(eventname,callback)监听消息 //监听客户端发送的 sendMsg 事件 clientSocket.on("sendMsg",function (data) { // data 为客户端发送的消息,可以是 字符串,json对象 console.log(data) clientSocket.broadcast.emit("receiveMsg",data); }) });
2) index.html中的js代码
<script src="js/socket.io.js"></script> <script type="text/javascript"> //引入 var socket = io.connect(); var data={ client:myid,//我的账号 msg:txt,//发送内容 sendwho:friid,//发给谁 pic:pic1//我的头像 }; socket.emit("sendMsg",data); //把data数据发送给后台
//接收从服务端推送消息 socket.on("receiveMsg",function (data) {
//data是接收到的数据 //判断服务端推送的消息 if(myyid!=data.sendwho){ //如果不是发给我的 ,不做任何操作 }else{ //若果是发给我的,将消息渲染在指定位置 } }); </script>
3.最终效果:
1)客户端1
2)客户端2
更多内容 请查看socket.io 文档