WebSocket Polling Application

During these days, the basic acknowledge of HTTP has been learned. So I established an application for easily communicate with real-time information translation. In this post, I will record the brief way to set a chat server, and some visuals technics will be displayed, like Snap.svg,Anime.js.

What’s WebSocket

这段用中文写 :P

我们的互联网通过HTTP协议来传输数据,即服务器收到请求后会发送相应数据给用户浏览器,浏览器渲染页面. 这个过程其实是 无状态 的, 可以理解成,妈妈给小孩喂食,小孩要拍妈妈一下,妈妈才会知道他要吃下一口(这个妈妈可能一边喂饭一边看电视). 而WebSocket,是一种比较新的协议,它允许客户端和服务器长时间的连接在一起,达成握手(HandShake)状态后可以一直传输信息. 所以这种状态可以理解成, 小孩张张嘴,妈妈就把饭喂进来了(妈妈一直乖乖地盯着堡堡呢). 这种协议方式,具有很高的效率并且执行起来比较简单(?). 传统HTTP协议中, 一些类双向连接服务都是通过不断的询问,即,妈妈时不时拍下宝宝,问他要不要继续吃.

好,我理解的就这样了,不能指望一个文科生懂这么深对吧.

Coding

This is not completed code, copy would not effect

My server was established by NodeJs & Express, so I can use NPM install WebSocket framework. Socket.io is an excellent frame to build webSocket serve.

$ npm install --save express@4.15.2
// intall express frame

$ npm install --save socket.io
// socket.io

At Server:

let io = require('socket.io')(http);

io.on('connection', function(socket){
      console.log('a user connected');
      // this log will be showed on console of terminal

      io.emit('somebodyCame',socket.id)
      // this command will send msg to ALL user, with new user's id

      socket.on('sendMsg',(msg)=>{
              // when user sent msg to server, 
              // server will operate this function

              io.emit('sendMsgToAll', msg )
              // server will send variable as msg to ALL user
      })
});

At Front-End:

let socket = io();
// socket.js must be referenced in HTML

socket.on('someBodyCame',(id)=>{
        DOMElement.innerHTML = id
        // new user's ID will be displayed on HTML
        // as response of server
})

let msg = 'Hello,suzie'
DOMButtonElement.onclick =()=>{
        socket.emit('sendMsg',msg) 
        // when the button was clicked
        // 'Hello,suzie' will be sent to server
}

socket.on('sendMsgToAll',(msg)=>{
        DOMElement2.innerHTML = msg
        // msg will be displayed on HTML
        // ALL of user, in same time
})

That’s basically all! The process is:

User =msg=> Server =msg=> AllUsers

让球球从中心扩散

又要写中文了 :S

画一个圆很简单,一百个也很简单,一百个有着不同大小颜色的也很简单;不过,怎么从中心分散地随机排列呢?怎么让他们从中心向外移动呢? 我们需要做一点初中水平的数学计算.

获得屏幕宽度,高度,得出屏幕中心点坐标
中心坐标加随机正负中点值
获得所有圆心的坐标
计算圆心处于哪个象限,即x,y分别往那个方向移动
计算斜率,得出移动距离

其中要点是,得到每个圆的坐标,这需要遍历所有圆:

svg.selectAll('.cir').forEach((cir)=>{
        let cirCoor = {
        x:cir.node.getBoundingClientBox().x,
        y:cir.node.getBoundingClientBox().y
        }            
    ...
})

要使用Element.getBoundingClientBox()来获取DOM元素在屏幕中的相对坐标,而不是它的属性.它的属性在进行了移动以后数据不会更新,会有偏差.

动画方面使用Anime.js,它使用CSS属性来进行移动元素,非常适合svg动画,性能也很高:)

let ani = anime({
        targets:'.cir', //使用CSS选择器
        translateX:{
                value: function(el,index,length){
                // 值得注意的是, 使用方法来计算移动值, 方法可以返回 这个对象,对象序列,对象总数
                // 这些数值可以让我们使对象的运动存在差异和相关性
                        return `+=${calcMethod(el)}`
                        // 这里返回的计算是 += , 即在原来的值上增加
                        // 通过这种更新值的方式,可以让元素多次运动
                        // calcMethod()则是需要我们定义的外部计算方法.
                },
                duration:1000,
                delay:function(el,index){
                        return 10 * index
                        // 序列越高出发时间越久,所以每个元素都是逐个开始运动的
                }
        }

WebSocket

All post

WebSocket Polling Application

What’s WebSocket

Coding

让球球从中心扩散