返回
编程
分类

首先是Socket.IO的官方网站,已经建立连接

日期: 2019-11-23 04:34 浏览次数 : 194

 原理:

node.js中的Socket.IO使用实例,node.jssocket.io

1. 简介

首先是Socket.IO的官方网站:

官网非常简洁,甚至没有API文档,只有一个简单的“How to use”可以参考。因为Socket.IO就跟官网一样简洁好用易上手。

那么Socket.IO到底是什么呢?Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5,应该可以满足绝大部分需求了。

2. 安装部署

2.1 安装

首先安装非常简单,在node.js环境下只要一句:

复制代码 代码如下:

npm install socket.io

2.2 结合express来构建服务器

express是一个小巧的Node.js的Web应用框架,在构建HTTP服务器时经常使用到,所以直接以Socket.IO和express为例子来讲解。

复制代码 代码如下:

var express = require('express')
    , app = express()
    , server = require('http').createServer(app)
    , io = require('socket.io').listen(server);
server.listen(3001);

若不使用express,请参考socket.io/#how-to-use

3. 基本使用方法

主要分为服务器端和客户端两段代码,都非常简单。

Server(app.js):

复制代码 代码如下:

//接上面的代码
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');});

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

首先io.sockets.on函数接受字符串"connection"作为客户端发起连接的事件,当连接成功后,调用带有socket参数的回调函数。我们在使用socket.IO的时候,基本上都在这个回调函数里面处理用户的请求。

socket最关键的是emit和on两个函数,前者提交(发出)一个事件(事件名称用字符串表示),事件名称可以自定义,也有一些默认的事件名称,紧接着是一个对象,表示向该socket发送的内容;后者接收一个事件(事件名称用字符串表示),紧接着是收到事件调用的回调函数,其中data是收到的数据。

在上面的例子中,我们发送了news事件和收到了other event事件,那么客户端应该会有对应的接收和发送事件。没错,客户端代码和服务器正好相反,而且非常相似。

Client(client.js)

复制代码 代码如下:

必威官网亚洲体育 ,<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('');
    socket.on('news', function (data) {
        console.log(data);
        socket.emit('other event', { my: 'data' });
    });
</script>

有两点要注意的:socket.io.js路径要写对,这个js文件实际放在了服务器端的node_modules文件夹中,在请求这个文件时会重定向,因此不要诧异服务器端不存在这个文件但为什么还能正常工作。当然,你可以把服务器端的socket.io.js这个文件拷贝到本地,使它成为客户端的js文件,这样就不用每次都向Node服务器请求这个js文件,增强稳定性。第二点是要用var socket = io.connect('网站地址或ip');来获取socket对象,接着就可以使用socket来收发事件。关于事件处理,上面的代码表示收到“news”事件后,打印收到的数据,并向服务器发送“other event”事件。

注:内置默认的事件名例如“disconnect”表示客户端连接断开,“message”表示收到消息等等。自定义的事件名称,尽量不要跟Socket.IO中内置的默认事件名重名,以免造成不必要的麻烦。

4. 其他常用API

1).向所有客户端广播:socket.broadcast.emit('broadcast message');

2).进入一个房间(非常好用!相当于一个命名空间,可以对一个特定的房间广播而不影响在其他房间或不在房间的客户端):socket.join('your room name');

3).向一个房间广播消息(发送者收不到消息):socket.broadcast.to('your room name').emit('broadcast room message');

4).向一个房间广播消息(包括发送者都能收到消息)(这个API属于io.sockets):io.sockets.in('another room name').emit('broadcast room message');

5).强制使用WebSocket通信:(客户端)socket.send('hi'),(服务器)用socket.on('message', function(data){})来接收。

5. 使用Socket.IO构建一个聊天室

最后,我们通过一个简单的实例来结束本篇。用Socket.IO构建一个聊天室就是50行左右的代码的事情,实时聊天效果也非常好。以下贴出关键代码:

Server(socketChat.js)

复制代码 代码如下:

//一个客户端连接的字典,当一个客户端连接到服务器时,
//会产生一个唯一的socketId,该字典保存socketId到用户信息(昵称等)的映射
var connectionList = {};

exports.startChat = function (io) {
    io.sockets.on('connection', function (socket) {
        //客户端连接时,保存socketId和用户名
        var socketId = socket.id;
        connectionList[socketId] = {
            socket: socket
        };

        //用户进入聊天室事件,向其他在线用户广播其用户名
        socket.on('join', function (data) {
            socket.broadcast.emit('broadcast_join', data);
            connectionList[socketId].username = data.username;
        });

        //用户离开聊天室事件,向其他在线用户广播其离开
        socket.on('disconnect', function () {
            if (connectionList[socketId].username) {
                socket.broadcast.emit('broadcast_quit', {
                    username: connectionList[socketId].username
                });
            }
            delete connectionList[socketId];
        });

        //用户发言事件,向其他在线用户广播其发言内容
        socket.on('say', function (data) {
            socket.broadcast.emit('broadcast_say',{
                username: connectionList[socketId].username,
                text: data.text
            });
        });
    })
};

Client(socketChatClient.js)

复制代码 代码如下:

var socket = io.connect('');
//连接服务器完毕后,马上提交一个“加入”事件,把自己的用户名告诉别人
socket.emit('join', {
    username: 'Username hehe'
});

//收到加入聊天室广播后,显示消息
socket.on('broadcast_join', function (data) {
    console.log(data.username + '加入了聊天室');
});

//收到离开聊天室广播后,显示消息
socket.on('broadcast_quit', function(data) {
    console.log(data.username + '离开了聊天室');
});

//收到别人发送的消息后,显示消息
socket.on('broadcast_say', function(data) {
    console.log(data.username + '说: ' + data.text);
});

//这里我们假设有一个文本框textarea和一个发送按钮.btn-send
//使用jQuery绑定事件
$('.btn-send').click(function(e) {
    //获取文本框的文本
    var text = $('textarea').val();
    //提交一个say事件,服务器收到就会广播
    socket.emit('say', {
        username: 'Username hehe'
        text: text
    });
});

这就是一个简单的聊天室DEMO,你可以根据你的需要随意扩展。Socket.IO基本上就是各种事件的提交和接收处理,思想非常简单。

socket.io类库不但可以相互发送消息,而且还可以通过socket端口对象的emit方法互相发送事件.

 

nodejs作为单纯的websocket的server端,来完成java的springMVC框架中前端的消息推送,

用node.js安装WebSocket库:
npm install ws然后建立server:
var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080});wss.on('connection', function(ws) { ws.on('message', function(message) { console.log('received: %s', message); }); ws.send('something');}); 客户端用HTML5标准:
var ws = new WebSocket("ws://127.0.0.1:8080/"); ws.onopen = function() { alert("Opened"); ws.send("I'm client"); }; ws.onmessage = function (evt) { alert(evt.data); }; ws.onclose = function() { alert("Closed"); }; ws.onerror = function(err) { alert("Error: " + err); };  

emit在之前的事件上说过现在一句话带过:emit是用来手动触发事件的.

client利用regular http请求webpage

nodejs socketis 关系

node.js的npm里的socket.io是要依赖node.js的。  

1. 简介 首先是Socket.IO的官方网站: 官网非常简洁,甚至没有API文档,只有一个简单的...

复制代码 代码如下:

请求的webpage 执行javascript脚本,open a connection to server.

socket.emit(event,data,function(data1,data2......){
});

有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client and from the client to the server

在使用emit方法发送事件时,可以再另一端使用socket端口对象的on方法会once方法监听.

 

复制代码 代码如下:

  HTML5 WebSockets

socket.on(event,function(data,fn){
});
socket.once(event,function(data,fn){
})

 

上面的回调函数中的参数data:对方发送的事件中携带的数据,

 

fn:对方在发送事件时指定的callback回调函数.

客户端

案例1:当服务器和客户端连接后,向客户端发送一个news事件,事件中携带一个对象,该对象的hello属性值为"你好".在接收到客户端发送my other event事件时,在控制台中输出"服务器端就收到数据"+客户端发送事件中携带的数据.

 

服务器端代码,server.js

 

复制代码 代码如下:

  说明:

 var http=require("http");
 var sio=require("socket.io");
 var fs=require("fs");
 var server=http.createServer(function (req,res) {
     res.writeHead(200,{"Content-type":"text/html"});
     res.end(fs.readFileSync("./index.html"));
 });
 server.listen(1337);
 var socket=sio.listen(server);
 socket.on("connection", function (socket) {
     socket.emit("news",{hello:"你好"});
     socket.on("my other event", function (data) {
         console.log("服务器端接受到信息%j",data);
     });
 });

 

客户端index.html代码:

  readyState:

复制代码 代码如下:

 

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="/socket.io/socket.io.js"></script>
     <script>
         var socket=io.connect();
         socket.on("news", function (data) {
             console.log(data.hello);
             socket.emit("my other event",{my:"data"});
         });       
     </script>
 </head>
 <body>
 
 </body>

CONNECTING (0):表示还没建立连接;

运行结果:、  

OPEN (1): 已经建立连接,可以进行通讯;

必威官网亚洲体育 1
可以发现一点:执行总是在监听端,而不是手动执行端.

CLOSING (2):通过关闭握手,正在关闭连接;

案例2:在手动触发对方事件时,指定回调函数.

CLOSED (3):连接已经关闭或无法打开;

当客户端和服务端连接后,向客户端发送setName事件,事件携带"张三",触发事件时,指定一个回调函数,该回调函数向控制台输出2个参数值.

 

复制代码 代码如下:

  

 var http=require("http");
 var sio=require("socket.io");
 var fs=require("fs");
 var server=http.createServer(function (req,res) {
     res.writeHead(200,{"Content-type":"text/html"});
     res.end(fs.readFileSync("./index.html"));
 });
 server.listen(1337);
 var socket=sio.listen(server);
 socket.on("connection", function (socket) {
     socket.emit("setName","张三", function (data1,data2) {
         console.log(data1);
         console.log(data2);
     });
 });

 

复制代码 代码如下:

  url: WebSocket 服务器的网络地址,协议通常是”ws”或“wss(加密通信)”,

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="/socket.io/socket.io.js"></script>
     <script>
         var socket=io.connect();
         socket.on("setName", function (name,fn) {
            console.log(name);
             fn("李四","王五");
         });     
     </script>
 </head>
 <body>
 
 </body>
 </html>

 

执行结果:

  事件:

必威官网亚洲体育 2

 

回调函数实在触发端执行的.

send:向服务器端发送数据

您可能感兴趣的文章:

  • node.js中的Socket.IO使用实例
  • node.js中Socket.IO的进阶使用技巧
  • 基于socket.io和node.js搭建即时通信系统
  • 浅析nodejs实现Websocket的数据接收与发送
  • node.js中使用socket.io的方法
  • 基于html5和nodejs相结合实现websocket即使通讯
  • WebSocket+node.js创建即时通信的Web聊天服务器
  • 用nodejs搭建websocket服务器
  • Node.js中使用socket创建私聊和公聊聊天室
  • node.js中使用socket.io制作命名空间
  • 使用Node.js和Socket.IO扩展Django的实时处理功能
  • nodejs实现套接字服务功能详解

close 方法就是关闭连接;

onopen连接建立,即握手成功触发的事件;

onmessage收到服务器消息时触发的事件;

onerror异常触发的事件;

 

 

  使用例子:

 

复制代码

// 创建一个Socket实例

var socket = new WebSocket('ws://localhost:8080'); 

 

// 打开Socket 

socket.onopen = function(event) { 

 

  // 发送一个初始化消息

  socket.send('I am the client and I'm listening!'); 

 

  // 监听消息

  socket.onmessage = function(event) { 

    console.log('Client received a message',event); 

  }; 

 

  // 监听Socket的关闭

  socket.onclose = function(event) { 

    console.log('Client notified socket has closed',event); 

  }; 

 

  // 关闭Socket.... 

  //socket.close() 

};

复制代码

 

 

服务器端

 

 

 jWebSocket (Java)

 web-socket-ruby (ruby)

 Socket IO-node (node.js)

 

 

 

 下面以socket.io说明,环境说明:(node.js安装见

 

 1. 安装socket.io

 

 npm install -g socket.io

 

  2.使用require引入http和socket.io

 

var http = require("http");

var io= require('socket.io'); 

  3.创建server

 

var server = http.createServer(function(request, response){

    response.writeHead(200,{"Content-Type":"text/html"});

    response.write("WebSocket Start~~~~");

    response.end("");

}).listen(8000);

 4.监听

 

var socket= io.listen(server); 

 5.例子:

 

复制代码

var http = require("http");

var io= require('socket.io'); 

var server = http.createServer(function(request, response){

    response.writeHead(200,{"Content-Type":"text/html"});

    response.write("WebSocket Start~~~~");

    response.end("");

}).listen(8000);

 

var socket= io.listen(server); 

 

// 添加一个连接监听器

socket.on('connection', function(client){ 

 

  client.on('message',function(event){ 

    console.log('Received message from client!',event); 

  }); 

  client.on('disconnect',function(){ 

    clearInterval(interval); 

    console.log('Server has disconnected'); 

  }); 

});

复制代码

 

 

数据发送两种方式send和emit

 

 

使用send和emit都可以发送数据,但是emit可以自定义事件,如下:

 

emit:

 

复制代码

//服务器

 

socket.on('connection', function(client){ 

  client.on('message',function(event){ 

    client.emit('emitMessage', { hello: 'messgge received, wish you happy'+new Date().toString() });

  }); 

 

});

 

 

//客户端

socket.on('emitMessage',function(data) { 

  document.getElementById("result").innerHTML+=data.hello + "<br />";

 

});

复制代码

send:

 

复制代码

//服务器

 

socket.on('connection', function(client){ 

  client.send('hello, I am the server');

});

 

 

//客户端

socket.on('message',function(data) { 

  document.getElementById("result").innerHTML+=data + "<br />";

 

});

复制代码

 

 

实例:(socket.io)

 

 

客户端:

 

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

div{

    border-radius: 10px;

    border: 2px solid pink;

    width:800px;

}

</style>

</head>

<body>

<h1></h1>

<div id="result"></div>

<script src=";

<script>

//创建Socket.IO实例,建立连接

 

var socket = io.connect('');

 

// 添加一个连接监听器

socket.on('connect',function() { 

  console.log('Client has connected to the server!'); 

});

 

// 添加一个连接监听器

socket.on('message',function(data) { 

  document.getElementById("result").innerHTML+=data + "<br />";

 

});

socket.on('emitMessage',function(data) { 

  document.getElementById("result").innerHTML+=data.hello + "<br />";

 

});

 

// 添加一个关闭连接的监听器

socket.on('disconnect',function() { 

  console.log('The client has disconnected!'); 

}); 

 

// 通过Socket发送一条消息到服务器

function sendMessageToServer(message) { 

  socket.send(message); 

}

var date = new Date();

var ms="Time: "+date.toString()+"Today is a nice day, wish you happy";

setInterval("sendMessageToServer(ms)",1000);

</script>

 

</body>

</html>

复制代码

服务器:

 

复制代码

var http = require("http");

var io= require('socket.io'); 

var server = http.createServer(function(request, response){

    response.writeHead(200,{"Content-Type":"text/html"});

    response.write("WebSocket Start~~~~");

    response.end("");

}).listen(8000);

 

var socket= io.listen(server); 

 

// 添加一个连接监听器

socket.on('connection', function(client){ 

 

  client.on('message',function(event){ 

    console.log('Received message from client!',event); 

    client.emit('emitMessage', { hello: 'messgge received, wish you happy'+new Date().toString() });

  }); 

  client.on('disconnect',function(){ 

   // clearInterval(interval); 

    console.log('Server has disconnected'); 

  }); 

  client.send('hello, I am the server');

});

client利用regular http请求webpage 请求的webpage 执行javascript脚本,open a connection to server. 有新的信息时服务器和客户端可以相互发送信息(...