Socket.IO学习基础功能和基本使用方法

Socket.IO

Socket.IO 由两部分组成:

开发环境下, socket.io 会自动提供客户端。正如我们所见,到目前为止,我们只需要安装一个模块:

npm install socket.io

这会安装模块并添加依赖到 package.jsonindex.js 文件中添加该模块:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
console.log('a user connected');
});

http.listen(3000, function(){
console.log('listening on *:3000');
});

我们通过传入 http (HTTP 服务器) 对象初始化了 socket.io 的一个实例。

然后监听 connection 事件来接收 sockets, 并将连接信息打印到控制台。

在 index.html 的 </body> 标签中添加如下内容:

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>

这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量,然后连接服务器。

请注意我们在调用 io() 时没有指定任何 URL,因为它默认将尝试连接到提供当前页面的主机。

重新加载服务器和网站,你将看到控制台打印出 “a user connected”。

每个 socket 还会触发一个特殊的 disconnect 事件:

io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});

触发事件

Socket.IO 的核心理念就是允许发送、接收任意事件和任意数据。任意能被编码为 JSON 的对象都可以用于传输。

二进制数据 也是支持的。

这里的实现方案是,当用户输入消息时,服务器接收一个 chat message 事件。index.html 文件中的 script 部分现在应该内容如下:

 
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>

index.js 中打印出 chat message 事件:

io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});

广播

接下来的目标就是让服务器将消息发送给其他用户。

要将事件发送给每个用户,Socket.IO 提供了 io.emit 方法:

io.emit('some event', { for: 'everyone' });

要将消息发给除特定 socket 外的其他用户,可以用 broadcast 标志:

io.on('connection', function(socket){
socket.broadcast.emit('hi');
});

为了简单起见,我们将消息发送给所有用户,包括发送者。

io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});

在客户端中,我们捕获 chat message 事件,并将消息添加到页面中。现在客户端代码应该如下:

<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>

就这样,聊天应用就完成了,大约只有 20 行代码!

我们用Koa写一下

Koa结合Socket.IO

服务端

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
let app = new Koa();
let router = new Router();
app.use(static(__dirname+"/static"));
const server = require("http").createServer(app.callback());
const io = require("socket.io")(server);
router.get("/",ctx=>{
ctx.body = "some value...";
});
app.use(router.routes());
io.on("connection",(socket)=>{
console.log("有socket连接");
// socket.on("testFn",function(data){
// console.log(data);
// // socket.emit("clientFn",data); //发送给一个用户
// setTimeout(() => {
// socket.broadcast.emit("clientFn",data); //广播给出了自己之外的所有用户;
// }, 2000);

// })
socket.on("addData",function(data){
console.log(data);
socket.broadcast.emit("addInputData",data);
})
})
server.listen(3000);

客户端

<script>
let socket = io.connect("/");
// socket.emit("testFn","我是客户端发送的内容");
// socket.on("clientFn",function(data){
// console.log("接收到服务端的数据 :",data);
// })
document.querySelector(".btn").onclick = function(){
let val = document.querySelector(".input-frame").value;
socket.emit("addData",val);
let ul = document.querySelector(".chat-show");
let li = document.createElement("li");
li.innerHTML = val;
ul.appendChild(li);
}
socket.on("addInputData",function(data){
// console.log(data);
let ul = document.querySelector(".chat-show");
let li = document.createElement("li");
li.innerHTML = data;
ul.appendChild(li);
})
</script>

简单了解使用方法更多的Api 请查看官方文档

上一篇

本地存储的三种方案学习Cookie,Storage之localStorage和sessionStorage的相同与不同点