基於socket.io客戶端與服務端的相互通信

socket.io是對websocket的封裝，用於客戶端與服務端的相互通信。官網:https://socket.io/。  

下面是socket.io的用法：

一、因爲使用express開的本地服務，先下載相關依賴

cnpm install express socket.io

二、服務端代碼

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

三、客戶端代碼

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

四、執行

node index.js

5.這裏是demo的連接