基于socket.io客户端与服务端的相互通讯
Posted 啤酒煮鸡蛋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于socket.io客户端与服务端的相互通讯相关的知识,希望对你有一定的参考价值。
socket.io是对websocket的封装,用于客户端与服务端的相互通讯。官网:https://socket.io/。
下面是socket.io的用法:
1、由于使用express开的本地服务,先下载相关依赖
cnpm install express socket.io
2、服务端代码
const express = require("express"); const io = require("socket.io"); const app = express(); app.use(express.static(\'project\')); app.get(\'/index.htm\', function (req, res) { res.sendFile(__dirname + "/" + "index.htm"); }) var server = app.listen(3000, function () { console.log("应用实例,访问地址为http://127.0.0.1:3000") }) var sockets = io(server);//监听server sockets.on("connection",function(socket){ console.log("初始化成功!下面可以用socket绑定事件和触发事件了"); socket.on("send",function(data){ console.log("客户端发送的内容:",data); socket.emit("getMsg","我是返回的消息~~~~~~~"); }) setTimeout(function(){ socket.emit("getMsg","我是初始化5s后返回的消息~~~~~~~"); },5000) });
3、客户端代码
<button id="send">发送消息到服务器</button> <div> <p>服务器返回的消息是:</p> <i id="msg"></i> </div> <script src="socket.io.js"></script> <script> var socket = io("ws://localhost:3000"); //初始化websocket,连接服务端 var send = document.querySelector("#send"), msg = document.querySelector("#msg"); send.onclick = function () { console.log("点击了发送消息!"); socket.emit("send", "hello") } socket.on("getMsg", function (data) { console.log("服务端发送的消息是:", data); msg.innerhtml += data + \'<br/>\'; }) </script>
4、执行
node index.js
以上是关于基于socket.io客户端与服务端的相互通讯的主要内容,如果未能解决你的问题,请参考以下文章
Socket.IO介绍:支持WebSocket用于WEB端的即时通讯的框架