天枫庄资源网

HTML5之WebSocket入门3 -通信模型socket.io
网络编程 2024/12/25 佚名
2 0
天枫庄资源网 Design By www.wosibo.com

socket.io为什么会诞生呢？请看下面文字说明。

为什么需要socket.io？

    node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。

    socket.io设计的目标是支持任何的浏览器，任何Mobile设备。目前支持主流的PC浏览器(IE,Safari,Chrome,Firefox,Opera等)，Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。

    socket.io基于node.js并简化了WebSocket API，统一了各种通信API。它支持：WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。

    socket.io解决了实时的通信问题，并统一了服务端与客户端的编程方式。启动了socket以后，就像建立了一条客户端与服务端的管道，两边可以互通有无。

安装

    在命令行中执行：npm install socket.io 即可安装。

服务端编程模型

    服务端编程还是与普通服务器一样，启动服务器，提供服务，处理事件。

比如下面的server.js：

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' "Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

客户端编程模型 

    客户端编程也是相似的处理方式，连接服务器，交互信息。

比如下面的index.html页面：

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/UploadFiles/2021-04-02/json.js">


注意事项




1. 启动服务器还是交给node，打开命令行窗口，定位到server.js所在文件夹，输入node server.js启动服务器。




    在上面的index.html中，注意这行：<script src="/UploadFiles/2021-04-02/socket.io.js">

以直接使用下面这个公开的脚本：





<script src="/UploadFiles/2021-04-02/socket.io.js">




    此外需要注意这行：socket = io.connect(null)。


这里的null代表连接本地服务，可以换成"localhost"，效果也是一样的。 




2. 可以使用socket.io直接启动http服务。


例如：





var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});







3. socket.io可以直接通过send方法发送消息，使用message事件接收消息，例如：





//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>





4. 发送和处理数据




    两端可以互发事件，互发数据，相互通信。发送事件的代码为：socket.emit(action, data, function)，其中action为事件的名称，data为数据，function为回调函数;处理事件代码为：socket.on(action,function)，如果emit发送的时候有数据data，则function中参数包含了这个数据。socket.io除了发送和处理内置事件，如connect, disconnect, message。还允许发送和处理自定义事件，例如:


//服务端：







io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});







//客户端：







<script src="/UploadFiles/2021-04-02/socket.io.js">


5. 从上面可以看出来，发送数据的时候，send和emit是都可以使用的。只不过emit更是强化了自定义事件的处理。




6. 可以在服务端使用socket的get/set方法存储客服端的相关数据，例如：


//服务端







var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});







//客户端







<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname"htmlcode">



var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});





8. 可以在同一次链接中，建立多个互相独立的通道，而不是建立多次链接。这个官方叫法是“多个namespace”，比如官方的例子：





var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>





 socket.io的配置 




    socket.io的配置很简单，如果配置过express的话，你会发现它们几乎是使用差不多的方式。先看个小例子：





var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});





可以看到，socket.io使用configure, set, enable, disable进行配置。




1. 使用configure方法配置不同的运行环境下的行为；就是说在不同的环境下，启用不同的配置选项。configure的第一个参数是运行环境，第二个参数是进行配置的function。运行环境典型的如production或者是development，当然这里可以使任意的字符串。如果configure的第一个参数省略的话，说明后面的配置是公用的，不管是什么环境下，都有效。




2. 配置好各种运行环境了，那么如何设置当前运行在那个环境下呢？这个是通过在命令行中修改环境变量NODE_ENV的值实现的。




3. 在configure的配置函数中，我们可以使用set, enable, disable设置相关选项。




4. 具体可以配置的项参考：https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO

实用参考




socket.io介绍：http://davidchambersdesign.com/getting-started-with-socket.io/




socket.io安装和使用说明：http://socket.io/




socket.io Wiki：https://github.com/LearnBoost/Socket.IO/wiki




                                

                                

                                     

                                

                                    标签：
                                        
socket.io_WebSocket,socket.io和websocket,html5_websocket,示例

                                     

                                
天枫庄资源网 Design By www.wosibo.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
天枫庄资源网 Design By www.wosibo.com

评论“HTML5之WebSocket入门3 -通信模型socket.io”

暂无HTML5之WebSocket入门3 -通信模型socket.io的评论...
www.wosibo.com 天枫庄资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
天枫庄资源网 Design By www.wosibo.com