`
hongtoushizi
  • 浏览: 376815 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Socket.IO入门

阅读更多

       最近用node+socket.io+mqtt+php实现了基于PC和android的聊天工具。一直也没故上总结,今天从网上看到一篇整理的特别好的文章,故转载过来,再次感觉原文作者。

 

       转载自:http://raytaylorlin.com/Tech/web/Node.js/socket-io-tutorial/

 

Socket.IO入门

2013-11-29

暑假的时候Heatmap项目组需要对在线即时通信和协作进行技术探索,于是我开始研究Web在线聊天的实现方式。在充分对Comet技术进行了研究之后(详见我之前写的一篇Comet简介的博文),在丁基友的提示之下决定尝试使用Socket.IO。一个是考虑以后HTML5做网络通信需要用到WebSocket现在可以提前接触一下,另外一个是这个东西的服务器端要用到Node.js,之前就对node很有兴趣正好借此提升下功力。

1. 简介

首先是Socket.IO的官方网站:http://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)

<scriptsrc="/socket.io/socket.io.js"></script><script>var socket = io.connect('http://localhost');
    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

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

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

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

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

  • 强制使用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('http://localhost');//连接服务器完毕后,马上提交一个“加入”事件,把自己的用户名告诉别人
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基本上就是各种事件的提交和接收处理,思想非常简单。

 

 

分享到:
评论

相关推荐

    nodeJS+socket.io做一个简单的聊天室

    在本文中,我们将深入探讨如何使用Node.js和Socket.IO创建一个简单的聊天室。这是一个非常实用的项目,适合初学者入门,同时也是对这两种技术的绝佳实践。 Node.js是一种基于Chrome V8引擎的JavaScript运行环境,它...

    socket.io应用简介

    socket.io实时通讯入门讲解PPT,并有代码示例。

    Socket.IO-Test:测试Socket.IO连接的速度

    Socket.IO速度测试 测试Socket.IO连接的速度 ##入门 使用git clone git://github.com/joe-zim-javascript-blog/Socket.IO-Test.git将这个存储git clone git://github....

    node.js中的socket.io入门实例

    JavaScript"&gt;&lt;/script&gt;&lt;script&gt;var socket = io.connect('http://localhost:8080');socket.on('news', function (data) {console...通过上述入门实例,我们可以快速了解如何在Node.js中使用Socket.IO创建实时通信应用。

    socket.io.play:具有播放框架2.0的socket.io

    用于游戏的socket.io! Framework 2.0(适用于Scala) Socket.io服务器对Play框架的原始支持。 什么是socket.io? socket.io在服务器广告浏览器之间提供独立于浏览器的双向实时套接字式通信。 从 Socket.IO旨在使...

    HTML5之WebSocket入门3 -通信模型socket.io

    安装socket.io非常简单,只需要在命令行中运行`npm install socket.io`即可。在服务端,我们可以使用Node.js集成socket.io,创建一个WebSocket服务器。如示例中的`server.js`所示,首先创建HTTP服务器,然后通过`...

    node.js中Socket.IO的进阶使用技巧

    本篇在入门篇的基础上,继续探讨Socket.IO的进阶用法。本篇将从配置、房间、事件等方面入手,介绍一些Socket.IO中实用的API和注意事项。 1. 配置 Socket.IO提供了4个配置的API:io.configure, io.set, io.enable, io...

    使用React + Redux + Socket.io + Material-UI实现聊天室-JavaScript开发

    演示功能:显示在线用户更改消息框颜色保留聊天室/清除消息入门要执行p聊天室,请使用React + Redux + Socket.io + Material-UI实现聊天室。 演示功能:显示在线用户更改消息框颜色保留聊天室/清除消息入门要执行该...

    socket-io-redis-emitter:socket.io redis适配器

    :construction: Kotlin插座-Redis适配器该库使您可以从kotlin后端通过socket.io轻松发布通知。 目前正在建设中,尚未准备好生产。 它必须与socket.io-redis结合使用。 当前版本仅使用socket.io-redis@6和socket.io@4...

    koa-socket-2:Koa的Socket.IO

    Koa-socket-2 用于将socket.io连接到Koa实例的糖Koa-socket-2使用socket.io v3。 建议您使用socket.io v3客户端连接到koa-socket-2服务器。 Koa-socket-2仅与Koa v2样式的中间件(将上下文作为参数传递)兼容。 Koa-...

    Socket IO入门-WebSocket

    Socket IO入门-WebSocket 在本篇文章中,我们将探讨Socket IO入门-WebSocket的相关知识点。 即时通讯简介 即时通讯(Instant Messaging)是一种基于互联网的即时交流消息的业务。它可以分为两种类型:在线push和...

    mqtt-realtime-chart-server:Express.js-MQTT-实时流的Socket.io应用程序

    mqtt-realtime-chart-server是一个Express.js-MQTT-Socket.io应用程序,可与结合使用。 产品特点 服务器 发布并订阅MQTT主题(例如,电压) 使用websockets将收到的消息转发给客户端 客户 多系列折线图实时数据...

    chatroom:nodejs express socket.io 聊天室

    Socket.IO入门** Socket.IO的主要目标是实现实时、低延迟的双向通信。它自动处理WebSocket连接,同时回退到其他兼容的传输方式(如polling),确保在各种网络条件下都能工作。 首先,你需要在服务器端安装Socket....

    socketio-chat:Node 和 Socket.io 聊天应用程序,来自 Socket.io“入门”页面

    NodeJS 和 Socket.IO 聊天应用程序,来自 安装并运行 克隆 repo,并进入目录: $ git clone https://github.com/AmundsenJunior/socketio-chat.git $ cd socketio-chat .gitignore将node_modules/保留在 repo ...

    twilio-socketio-video-conference:使用 Socket.io 和 Node.js 集成 Twilio Video 的项目

    twilio socketio node.js 视频会议使用 Socket.io 和 Node.js 集成 Twilio Video 的项目该代码是对 twilio 视频快速入门示例的修改。 我们正在使用 socket.io 将 AccessToken 从服务器传送到浏览器,这应该允许设备...

    基于socket.io和node.js搭建即时通信系统

    【基于socket.io和node.js搭建即时通信系统】 即时通信(Instant Messaging)系统是现代网络应用中不可或缺的一部分,它允许用户实时地交换信息。在本文中,我们将探讨如何使用socket.io和node.js这两个强大的工具...

    video-chat-webrtc:使用Socket.io和WebRTC开发的简单视频聊天应用

    视讯通讯-WebRTC 使用Socket.io和WebRTC开发的简单视频聊天应用 :movie_camera:入门首先,您必须使用或 ( yarn或npm i )作为程序包管理器来安装所有依赖项,然后再运行yarn dev或npm run dev 。 该项目将在...

    docker-ui:一个Web界面,用于通过Socket.IO和NodeJs列出并显示来自Docker的容器日志

    docker-ui 一个Web界面,用于列出和显示来自Docker的容器日志,从而保持Socket.IO和NodeJ的实时体验。入门列出容器将此存储库克隆到您的Docker服务器计算机上; 运行节点server.js并访问列出您的容器。记录容器在...

Global site tag (gtag.js) - Google Analytics