socket接收的消息怎么更新到页面_利用socketio实现简易即时消息服务

背景简介

以前开发HTTP服务器更多使用的是python语言中的Flask框架来完成，但是在最近的业务中涉及到在web页面中实时获取消息更新，这个时候我能想到的解决方案

1.写一个循环ajax请求，不断请求后台服务器然后更新数据

2.借助websocket协议从服务端推送新数据到web端

3.socketio

考虑到轮询ajax的伪实时和带宽成本，以及websocket的兼容性后，决定采取方案3 socketio。

socketio这个协议本身和node配合会非常好，所以决定学习一下node应用的编写，当然Flask本身也有第三方中间件flask-socketio对应的实现

编写node应用一般使用web framework是以下两个

1.express

2.koa

Express

express相对来说比较简单一点，如你所想，第一个例程通常都是由Hello world开始

万能的Hello world

开始之前记得安装express

npm i express

以下例程来自socketio官方上

index.js文件内容如下

//index.jsvar express = require('express');var http = require('http')var socketio = require('socket.io')var app = express();var server = http.Server(app);var io = socketio(server);app.get('/', (req, res) => {  res.sendFile(__dirname + '/index.html');});// 注册新连接到来的回调函数io.on('connection', (socket) => {  console.log('one connect comming');});server.listen(3000, () => {  console.log('listening on *:3000');});

index.html文件内容如下

                      Socket.IO chat     Send      

编写完成之后调用node index.js运行服务器，用浏览器访问一下localhost:3000看看效果，如果程序正常应该在控制台和浏览器端可以看到效果

终端输出

浏览器端

消息同步功能实现(简易的聊天室)

如果需要实现在多个浏览器上同步消息，实现原理为由客户端向服务端发送消息，然后再由服务端向客户端推送消息，示意图如下

通信原理图

要完成上图的效果，我们首先需要实现客户端向node服务发送聊天事件，编写index.html，将其中的script标签内的脚本修改如下代码如下

然后我们需要实现的是服务向其它客户端推送chat事件，

调用on方法即可注册回调函数, 其中第一个参数'connection'为事件名称, 第二个参数为回调函数，将index.js代码修改成下图

// 注册新连接到来的回调函数io.on('connection', (socket) => {  socket.on('chat', (msg) => {    //io.emit用来向所有已经建立连接的socket发送事件    io.emit('chat', msg);  });});

效果动态图，我这边是使用4个浏览器容器来模拟多人同步的场景

聊天室效果图