socket.on("message",msg => {
console.log(msg);
});
同时,socket对象还可以监听disconnect 事件,来监听用户断开连接的情况
socket.on("disconnect",() => {
console.log("有一用户退出连接");
});
因为我们这次的主题是要创建一个能够实时聊天的聊天室,因此光有这些是不够的,我们还需要一个能够与用户交互的客户端。
下面是我的socketIOTest代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="" id="content" cols="30" rows="10" ></textarea>
<input id="write" type="text" placeholder="please write content here">
<input id="send" type="button" value="send" />
<script src="./socket.io/socket.io.js"></script>
<script>
let send = document.getElementById("send");
let write = document.getElementById("write");
let content = document.getElementById("content");
let socket = io.connect();
//发送消息
send.onclick = () => {
let msg = write.value;
// content.innerHTML = content.value + msg + "n";
socket.send(msg);
};
//接收到消息
socket.on("message",msg => {
console.log("从服务器接收到的消息 : " + msg);
//更新内容
content.innerHTML = content.value + msg + "n";
});
socket.on("disconnect",() => {
console.log("与服务器断开连接");
});
</script>
</body>
</html>
在上述代码中,我用script标签引入了一个socket.io.js文件,这个文件不需要另外去下载,而直接引入即可,因为socket.io.js是被包含于socket.io模块中,在上面node的程序代码中,我们通过require方法引入了socket.io模块,因此我们可以直接通过相对路径访问到它。
<script src="./socket.io/socket.io.js"></script>
接下来我们就可以在script标签中使用如同服务端的代码。
let socket = io.connect();
使用io.connect()方法连接到websocket服务器,该方法返回一个与连接的服务器与之对应的一个socket端口对象。
下面我们同样监听message 和 disconnect事件。
//接收到消息
socket.on("message",msg => {
console.log("从服务器接收到的消息 : " + msg);
//更新内容
content.innerHTML = content.value + msg + "n";
});
socket.on("disconnect",() => {
console.log("与服务器断开连接");









