webSocket

什么是webSocket API?

WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。

局部安装

npm install socket.io –save

客户端请求

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="socket.io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var socket = io();
    $('form').submit(function(){
        //客户端往服务器推送消息
        socket.emit('chat Message',$('#m').val());
        $('#m').val('');
        return false;
    })
    //客户端监听事件 做界面操作处理(server推送过来的消息)
    socket.on('chat Message',function(msg){
         $('#messages').append($('<li>').text(msg));
    })
</script>

服务器请求和发送

请求express模块

var express = require(‘express’)
var app = express();

把express的模板引入到服务器内

var http = require(‘http’).server(app);
var io = require(‘socket.io’).(http); //后台建立通信协议

设置界面路径

处理界面数据

app.get(‘/‘,function(req,res){
res.send(); //服务器给界面返回的数据
res.sendFile(__dirname+”/index.html”); //当前目录下的index.html 用户界面
})

通信协议导入服务器

io.on(‘connection’,function(socket){
console.log(‘服务器和通信协议连接完毕’);
socket.on(‘chat Message’,function(msg){ //服务器来监听客户端发送来的消息
this.emit(‘chat Message’,msg); //服务器将收到的消息推送到客户端
})
this.broadcast.emit(‘chat Message’,msg); //服务器发送一个广播,使各个客户端接收来自服务器发出的消息
})

监听服务器端口

http.listen(3000,function(){
console.log(‘监听服务器的端口为3000’);
})

坚持原创技术分享,您的支持将鼓励我继续创作!