socket.io.js实例的简单介绍

发布时间：2022-11-24

本文目录一览：

  1. 什么是Websocket
  2. 前台h5 Socket.Io.js做客户端，服务器用Tomcat，java后台怎么实现通讯。也是用socketio吗？上详细代码。
  3. 如何用nodejs net进行聊天
  4. 如何使用Socket.IO编写聊天应用程序

什么是Websocket

认识HTML5的WebSocket 在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名为Socket.IO。

一、什么是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为指定目标创建，用于双向推送消息。

二、WebSocket API的用法

只专注于客户端的API，因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。

// 创建一个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()
};

让我们来看看上面的初始化片段。参数为URL，ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件，以表示Socket的状态。 onmessage事件提供了一个data属性，它可以包含消息的Body部分。消息的Body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多的数据。 WebSocket的语法非常简单，使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信，下面有几个后备方案供你使用：

  • Flash技术 —— Flash可以提供一个简单的替换。 使用Flash最明显的缺点是并非所有客户端都安装了Flash，而且某些客户端，如iPhone/iPad，不支持Flash。
  • AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术，但它不能优化发送的信息。也就是说，它是一个解决方案，但不是最佳的技术方案。 由于目前的IE等浏览器不支持WebSocket，要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API，那么该怎么办呢？幸运的是，Guillermo Rauch创建了一个Socket.IO技术。

三、带Socket.IO的WebSocket

Socket.IO是Guillermo Rauch创建的WebSocket API，Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测功能来判断是否建立WebSocket连接，或者是AJAX long-polling连接，或Flash等。可快速创建实时的应用程序。Socket.IO还提供了一个NodeJS API，它看起来非常像客户端API。

建立客户端Socket.IO

Socket.IO可以从GitHub下载，可以把socket.io.js文件包含到页面中：

<script src=""></script>

此时，Socket.IO在此页面上是有效的，是时候创建Socket了：

// 创建Socket.IO实例，建立连接
var socket = new io.Socket('localhost',{
    port: 8080
});
socket.connect();
// 添加一个连接监听器
socket.on('connect', function() {
    console.log('Client has connected to the server!');
});
// 添加一个连接监听器
socket.on('message', function(data) {
    console.log('Received a message from the server!', data);
});
// 添加一个关闭连接的监听器
socket.on('disconnect', function() {
    console.log('The client has disconnected!');
});
// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) {
    socket.send(message);
}

Socket.IO简化了WebSocket API，统一了返回运输的API。传输包括：

  • WebSocket
  • Flash Socket
  • AJAX long-polling
  • AJAX multipart streaming
  • IFrame
  • JSONP polling 你还可以设置任意的Socket.IO构造器的第二个选项，选项包括：
  • port - 待连接的端口
  • transports - 一个数组，包含不同的传输类型
  • transportOptions - 传输的参数使用的对象，带附加属性 Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。

四、NodeJS和Socket.IO联合开发

Socket.IO提供的服务器端解决方案，允许统一的客户端和服务器端的API。使用Node，你可以创建一个典型的HTTP服务器，然后把服务器的实例传递到Socket.IO。从这里，你创建连接、断开连接、建立消息监听器，跟在客户端一样。 一个简单的服务器端脚本看起来如下：

// 需要HTTP 模块来启动服务器和Socket.IO
var http = require('http'), io = require('socket.io');
// 在8080端口启动服务器
var server = http.createServer(function(req, res){
    // 发送HTML的headers和message
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Hello Socket Lover!</h1>');
});
server.listen(8080);
// 创建一个Socket.IO实例，把它传递给服务器
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');
    });
});

你可以运行服务器部分，假定已安装了NodeJS，从命令行执行：

node socket-server.js

现在客户端和服务器都能来回推送消息了！在NodeJS脚本内，可以使用简单的JavaScript创建一个定期消息发送器：

// 创建一个定期（每5秒）发送消息到客户端的发送器
var interval = setInterval(function() {
    client.send('This is a message from the server! ' + new Date().getTime());
}, 5000);

服务器端将会每5秒推送消息到客户端！

五、dojox.Socket和Socket.IO

Persevere的创建者Kris Zyp创建了dojox.Socket。dojox.Socket以Dojo库一致的方式封装了WebSocket API，用于在客户端不支持WebSocket时，使用long-polling替代。 下面是怎样在客户端使用dojox.Socket和在服务器端使用Socket.IO的例子：

var args, ws = typeof WebSocket != 'undefined';
var socket = dojox.socket(args = {
    url: ws ? '/socket.io/websocket' : '/socket.io/xhr-polling',
    headers: {
        'Content-Type': 'application/x-www-urlencoded'
    },
    transport: function(args, message){
        args.content = message; // use URL-encoding to send the message instead of a raw body
        dojo.xhrPost(args);
    };
});
var sessionId;
socket.on('message', function(){
    if (!sessionId){
        sessionId = message;
        args.url += '/' + sessionId;
    } else if(message.substr(0, 3) == '~h~'){
        // a heartbeat
    }
});

dojox.socket.Reconnect还创建了在套接字失去连接时自动重连。期待包含dojox.Socket的Dojo 1.6版本早日发布。

六、实际应用和WebSocket资源

有很多WebSocket的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的，在浏览器内聊天是最突出的应用。WebSocket由于其高效率，被大多数公司所使用。

WebSocket资源

前台h5 Socket.Io.js做客户端，服务器用Tomcat，java后台怎么实现通讯。也是用socketio吗？上详细代码。

socket.io封装了websocket，同时包含了其它的连接方式，比如Ajax。原因在于不是所有的浏览器都支持websocket，通过socket.io的封装，你不用关心里面用了什么连接方式。 你在任何浏览器里都可以使用socket.io来建立异步的连接。socket.io包含了服务端和客户端的库，如果在浏览器中使用了socket.io的js，服务端也必须同样适用。如果你很清楚你需要的就是websocket，那可以直接使用websocket

如何用nodejs net进行聊天

初始工作

安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save, --save可以使包添加到package.json文件里. 安装socket.io,命令npm install socket.io --save.

编写服务端代码

首先我们通过express来托管网站，并附加到socket.io实例里，因为socket.io初次连接需要http协议

var express = require('express'),
    io = require('socket.io');
var app = express();
app.use(express.static(__dirname));
var server = app.listen(8888);
var ws = io.listen(server);

添加服务器连接事件，当客户端连接成功之后，发公告告诉所有在线用户，并且，当用户发送消息时，发广播通知其它用户.

ws.on('connection', function(client){
    console.log('\033[96msomeone is connect\033[39m \n');
    client.on('join', function(msg){
        // 检查是否有重复
        if(checkNickname(msg)){
            client.emit('nickname', '昵称有重复!');
        }else{
            client.nickname = msg;
            ws.sockets.emit('announcement', '系统', msg + ' 加入了聊天室!');
        }
    });
    // 监听发送消息
    client.on('send.message', function(msg){
        client.broadcast.emit('send.message', client.nickname, msg);
    });
    // 断开连接时，通知其它用户
    client.on('disconnect', function(){
        if(client.nickname){
            client.broadcast.emit('send.message', '系统', client.nickname + '离开聊天室!');
        }
    });
});

由于客户端是通过昵称来标识的，所以服务端需要一个检测昵称重复的函数

// 检查昵称是否重复
var checkNickname = function(name){
    for(var k in ws.sockets.sockets){
        if(ws.sockets.sockets.hasOwnProperty(k)){
            if(ws.sockets.sockets[k] && ws.sockets.sockets[k].nickname == name){
                return true;
            }
        }
    }
    return false;
}

编写客服端代码

由于服务端采用第三方websokcet框架，所以前端页面需要单独引用socket.io客户端代码，源文件可以从socket.io模块里找，windows下路径为node_modules\socket.io\node_modules\socket.io-client\dist，这里有开发版和压缩版的，默认引用开发版就行. 前端主要处理输入昵称检查，消息处理，完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title>socket.io 聊天室例子</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="wrapper">
    <div class="content" id="chat">
        <ul id="chat_conatiner"></ul>
    </div>
    <div class="action">
        <textarea></textarea>
        <button class="btn btn-success" id="clear">清屏</button>
        <button class="btn btn-success" id="send">发送</button>
    </div>
</div>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript">
    var ws = io.connect('');
    var sendMsg = function(msg){
        ws.emit('send.message', msg);
    }
    var addMessage = function(from, msg){
        var li = document.createElement('li');
        li.innerHTML = '<span>' + from + '</span> : ' + msg;
        document.querySelector('#chat_conatiner').appendChild(li);
        // 设置内容区的滚动条到底部
        document.querySelector('#chat').scrollTop = document.querySelector('#chat').scrollHeight;
        // 并设置焦点
        document.querySelector('textarea').focus();
    }
    var send = function(){
        var ele_msg = document.querySelector('textarea');
        var msg = ele_msg.value.replace('\r\n', '').trim();
        console.log(msg);
        if(!msg) return;
        sendMsg(msg);
        // 添加消息到自己的内容区
        addMessage('你', msg);
        ele_msg.value = '';
    }
    ws.on('connect', function(){
        var nickname = window.prompt('输入你的昵称!');
        while(!nickname){
            nickname = window.prompt('昵称不能为空，请重新输入!')
        }
        ws.emit('join', nickname);
    });
    // 昵称有重复
    ws.on('nickname', function(){
        var nickname = window.prompt('昵称有重复，请重新输入!');
        while(!nickname){
            nickname = window.prompt('昵称不能为空，请重新输入!')
        }
        ws.emit('join', nickname);
    });
    ws.on('send.message', function(from, msg){
        addMessage(from, msg);
    });
    ws.on('announcement', function(from, msg){
        addMessage(from, msg);
    });
    document.querySelector('textarea').addEventListener('keypress', function(event){
        if(event.which == 13){
            send();
        }
    });
    document.querySelector('textarea').addEventListener('keydown', function(event){
        if(event.which == 13){
            send();
        }
    });
    document.querySelector('#send').addEventListener('click', function(){
        send();
    });
    document.querySelector('#clear').addEventListener('click', function(){
        document.querySelector('#chat_conatiner').innerHTML = '';
    });
</script>
</body>
</html>

如何使用Socket.IO编写聊天应用程序

我们将首先通过查看客户端代码。所有聊天互动都有HomeView处理，首先需要在 /public/js/models/main.js 中定义HomeModel。

var HomeModel = Backbone.Model.extend({
    defaults: {
        // Backbone collection for users
        onlineUsers: new UserCollection(),
        // Backbone collection for user chats, 初始化一个预定义聊天模型
        userChats: new ChatCollection([
            new ChatModel({sender: '', message: 'Chat Server v.1'})
        ])
    },
    // 添加一个新用户到 onlineUsers collection
    addUser: function(username) {
        this.get('onlineUsers').add(new UserModel({name: username}));
    },
    // 从onlineUsers collection中移除一个用户
    removeUser: function(username) {
        var onlineUsers = this.get('onlineUsers');
        var u = onlineUsers.find(function(item) {
            return item.get('name') == username;
        });
        if (u) {
            onlineUsers.remove(u);
        }
    },
    // 添加一个新的聊天到 userChats collection
    addChat: function(chat) {
        this.get('userChats').add(new ChatModel({sender: chat.sender, message: chat.message}));
    },
});

我们利用Backbone集合来侦听集合变化。这些集合的更新会直接由视图自动反映出来。接下来，需要在/public/index.html中定义home模板。

<script type="text/template" id="home-template">
    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-default">
                <div class="panel-heading">Lobby</div>
                <div class="panel-body">
                    <div class="nano">
                        <div class="content">
                            <div class="list-group" id="chatList"></div>
                        </div>
                    </div>
                    <form>
                        <input class="form-control" type="text" id="chatInput"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Online Users <span class="badge pull-right" id="userCount"></span></h3>
                </div>
                <div class="panel-body">
                    <div class="nano">
                        <div class="content">
                            <div class="list-group" id="userList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

聊天客户端

接下来，让我们来定义我们的 Socket.IO 聊天客户端。客户端与服务器端的通信，主要通过发送消息和监听通知来完成。这些通知触发事件与所述控制器进行通信。请参阅下面 /public/js/socketclient.js 的代码。

var ChatClient = function(options) {
    // 避免冲突
    var self = this;
    // app event bus
    self.vent = options.vent;
    // server hostname replace with your server's hostname eg:
    self.hostname = '';
    // connects to the server
    self.connect = function() {
        // connect to the host
        self.socket = io.connect(self.hostname);
        // set responseListeners on the socket
        self.setResponseListeners(self.socket);
    }
    // send login message
    self.login = function(name) {
        self.socket.emit('login', name);
    }
    // send chat message
    self.chat = function(chat) {
        self.socket.emit('chat', chat);
    }
    self.setResponseListeners = function(socket) {
        // handle messages from the server
        socket.on('welcome', function(data) {
            // request server info
            socket.emit('onlineUsers');
            self.vent.trigger('loginDone', data);
        });
        socket.on('loginNameExists', function(data) {
            self.vent.trigger('loginNameExists', data);
        });
        socket.on('loginNameBad', function(data) {
            self.vent.trigger('loginNameBad', data);
        });
        socket.on('onlineUsers', function(data) {
            console.log(data);
            self.vent.trigger('usersInfo', data);
        });
        socket.on('userJoined', function(data) {
            self.vent.trigger('userJoined', data);
        });
        socket.on('userLeft', function(data) {
            self.vent.trigger('userLeft', data);
        });
        socket.on('chat', function(data) {
            self.vent.trigger('chatReceived', data);
        });
    }
}

使用Socket.IO可以非常简单的发送和接受通信数据，上面的代码中，使用了下面的两个方法

  • socket.emit(message, [callback]) —— 向服务器端发送消息
  • socket.on(message, callback) —— 用于接收来自服务器的消息 让我们来看一下他们的通信协议

主控制器

客户端最后一步，主控制器，它控制了VIEW，MODEL和socket客户端，代码在/public/js/main.js中

var MainController = function() {
    var self = this;
    // Event Bus for socket client
    self.appEventBus = _.extend({}, Backbone.Events);
    // Event Bus for Backbone Views
    self.viewEventBus = _.extend({}, Backbone.Events);
    // initialize function
    self.init = function() {
        // create a chat client and connect
        self.chatClient = new ChatClient({vent: self.appEventBus});
        self.chatClient.connect();
        // create our views, place login view inside container first.
        self.loginModel = new LoginModel();
        self.containerModel = new ContainerModel({
            viewState: new LoginView({
                vent: self.viewEventBus,
                model: self.loginModel
            })
        });
        self.containerView = new ContainerView({model: self.containerModel});
        self.containerView.render();
    };
    // View Event Bus Message Handlers
    self.viewEventBus.on('login', function(name) {
        // socketio login
        self.chatClient.login(name);
    });
    self.viewEventBus.on('chat', function(chat) {
        // socketio chat
        self.chatClient.chat(chat);
    });
    // Socket Client Event Bus Message Handlers
    // triggered when login success
    self.appEventBus.on('loginDone', function() {
        self.homeModel = new HomeModel();
        self.homeView  = new HomeView({vent: self.viewEventBus, model: self.homeModel});
        // set viewstate to homeview
        self.containerModel.set('viewState', self.homeView);
    });
    // triggered when login error due to bad name
    self.appEventBus.on('loginNameBad', function(name) {
        self.loginModel.set('error', 'Invalid Name');
    });
    // triggered when login error due to already existing name
    self.appEventBus.on('loginNameExists', function(name) {
        self.loginModel.set('error', 'Name already exists');
    });
    // triggered when client requests users info
    // responds with an array of online users.
    self.appEventBus.on('usersInfo', function(data) {
        var onlineUsers = self.homeModel.get('onlineUsers');
        var users = _.map(data, function(item) {
            return new UserModel({name: item});
        });
        onlineUsers.reset(users);
    });
    // triggered when a client joins the server
    self.appEventBus.on('userJoined', function(username) {
        self.homeModel.addUser(username);
        self.homeModel.addChat({sender: '', message: username + ' joined room.'});
    });
    // triggered when a client leaves the server
    self.appEventBus.on('userLeft', function(username) {
        self.homeModel.removeUser(username);
        self.homeModel.addChat({sender: '', message: username + ' left room.'});
    });
    // triggered when chat receieved
    self.appEventBus.on('chatReceived', function(chat) {
        self.homeModel.addChat(chat);
    });
}

最后，我们需要定义一个MainController入口，调用init方法，代码位于/public/js/main.js中

聊天服务器端

应用程序的最后一部分是聊天服务器。它主要负责维护在线用户列表，广播聊天消息。比如，首先，服务器会给一个新的客户的连接请求命名，然后通过刚刚建立的socket，连接事件handlers。socket handler处理如下事件：

  • socket.on(message, callback) —— 在收到新邮件时回调函数被调用。消息可以是任何类型的数据，这取决于发送的消息。
  • socket.on('disconnect', callback) —— 当socket断开连接时候，回调函数被调用。
  • socket.emit(message, args) —— 通过socket发送消息。
  • socket.broadcast.send(message, args) —— 广播信息到除发送者之外的所有socket。 现在，我们已经看到了handler socket是如何工作的。首先，需要在/scripts/chatserver.js中定义一个用户模型 ：

总结

我们已经看到了如何使用Backbone和Socket.IO构建一个简单的聊天应用程序。还有很多没有在本文中涉及的Socket.IO性能，例如rooms和namespaces。通过这篇文章，我们可以看出使用Socket.IO很容易的在客户端和服务器端交换消息。

推荐文章