基于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

5.这里是demo的链接  

  

 

  

以上是关于基于socket.io客户端与服务端的相互通讯的主要内容,如果未能解决你的问题,请参考以下文章

Socket.IO介绍:支持WebSocket用于WEB端的即时通讯的框架

socket.io实现即时通讯消息推送的思路

即时通讯开发socket.io如何实现消息推送

原生 nodejs 结合 Socket.io 实现服务器和 客户端的相互通信

socket服务端的实现

Vue 使用 Vue-socket.io 实现即时聊天应用(通讯篇)