转载:socket.io 入门

时间:2021-06-04 00:04:22

原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序。
最最开始

先安装socket.io:

npm install socket.io

利用Node的搭建Http服务

分为两个文件,服务端文件app.js和客户端index.html

app.js
var app =require('http').createServer(handler)
, io =require('socket.io').listen(app)
, fs =require('fs')0405 app.listen(80);
function handler (req, res){fs.readFile(__dirname+'/index.html',function(err, data){
if(err){
res.writeHead(500);
return res.end('Error loading index.html');
}else{
      res.writeHead(200);
res.end(data);
}
});
}
io.sockets.on('connection',function(socket){
socket.emit('news',{ hello:'world'});
socket.on('my other event',function(data){
console.log(data);
});
});

这里需要注意的是:
require('socket.io').listen(app) 实际上这句就是讲socket的监听加入的app设置的http模块了
io.sockets.on('connection',function()....)这里设置了在连接后进行的处理,代码示例中,主要包含两件事,一个是向前段发送news的事件,一个是监听my other event事件。

index.html

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news',function(data){
console.log(data);
socket.emit('my other event',{my:'data'});
});
</script>
 

客户端一个引用了socket.io.js的javscript库
还有就是连接服务器(通过io.connect('http://localhost'))
之后在监听收到news的事件后,发送my other event事件

利用Express3框架
上面的例子只是使用nodejs建立了一个交互,也可以使用express2的web框架, 具体app.js代码如下:

var app =require('express')(), 
server =require('http').createServer(app),
io =require('socket.io').listen(server); server.listen(80); app.get('/',function(req, res){
res.sendfile(__dirname +'/index.html');}); io.sockets.on('connection',function(socket){
socket.emit('news',{ hello:'world'});
socket.on('my other event',function(data){
console.log(data);
});
});

接收发送事件
socket.io允许用户自定义发送接收的事件。除了connect,message,disconnect三个事件外,用户可以自定义自己的事件


app.js
var io =require('socket.io').listen(80);
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.js
<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>

 
 

发送获取数据
有的时候,你需要在发送数据后,等待服务器的消息确认。当然简单的发,可以通过两次消息发送,来完成。这里介绍一种使用回调函数的方法:

app.js
var io =require('socket.io').listen(80); io.sockets.on('connection',function(socket){
socket.on('ferret',function(name, fn){
fn('woot');});});
client.html
<script>var socket = io.connect();// TIP: .connect with no args does auto-discovery
socket.on('connect',function(){// TIP: you can avoid listening on `connect` and listen on events directly too!
socket.emit('ferret','tobi',function(data){
console.log(data);// data will be 'woot'});});</script>

广播
向所有的连接触发事件,这里注意:不包括本身连接的事件。

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

io.sockets.on('connection',function(socket){
socket.broadcast.emit('user connected');});

我写的聊天程序:

index.html

<scriptsrc="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on("notice",function(data){ var msg = document.getElementById('all').value;
document.getElementById('all').innerText = msg +"\n"+ data.message;}); var chat_fn =function(){var msg = document.getElementById("message").value;
socket.emit("chat",{message: msg});}; socket.on("nickname ready",function(data){
alert("nickname changed.");}); var change_nickname =function(){var nickname = document.getElementById("nickname").value; socket.emit('set nickname', nickname);};</script>
<textareaid="all"cols=40rows=20>
</textarea><br/>
<label>Message:</label>
<inputid="message"type="text"name="message"cols=120/>
<inputid="chat_btn"type="button"value="chat"onclick="javascript:chat_fn()"/>
<label>NickName:</label>
<inputid="nickname"typee="text"name="nickname"/>
<inputid="chang_name"type="button"value="nickname"onclick="javascript:change_nickname()"/>
app.js

var app =require('http').createServer(handler), io =require('socket.io').listen(app), fs =require('fs');

app.listen(80);function handler (req, res){
fs.readFile(__dirname +'/index.html',function(err, data){if(err){
res.writeHead(500);return res.end('Error loading index.html');} res.writeHead(200);
res.end(data);});} io.sockets.on('connection',function(socket){// socket.emit('news', { hello: 'world' });// socket.on('my other event', function (data) {// console.log(data);// }); socket.set('nickname','nickname',function(){}); socket.on('set nickname',function(name){
socket.set('nickname', name,function(){
console.log("change nickname=>"+ name);
socket.emit('nickname ready');});}); socket.on('chat',function(data){
socket.get('nickname',function(err, name){ socket.emit("notice",{message: name +":"+ data.message});
socket.broadcast.emit("notice",{message: name +":"+ data.message});
console.log("chat: "+ data.message);});});});

转载:socket.io 入门的更多相关文章

  1. socket&period;io入门整理教程

    socket.io入门整理  发布于 5 年前  作者 dtrex  124983 次浏览  最后一次编辑是 1 年前 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写 ...

  2. Socket&period;io 入门 - Renyi的博客

    Socket.io Vue 中使用 NPM 安装 npm install vue-socket.io --save npm install --save socket.io-client 引用 详情 ...

  3. socket&period;io 入门教程

    转载自:http://deadhorse.me/nodejs/2011/12/29/socket.io_induction.html socket.io socket.io是一个以实现跨浏览器.跨平台 ...

  4. Node&period;js、Express、Socket&period;io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  5. socket&period;io 入门篇(三)

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  6. socket&period;io 入门篇(二)

    本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html 前言 上篇我们介绍了 socket.io 基本使用方法,本篇 ...

  7. socket&period;io 入门篇(一)

    本文原文地址:https://www.limitcode.com/detail/591b114bb1d4fe074099d9c9.html 前言 本篇介绍使用node.js模块组件socket.io实 ...

  8. socket&period;io入门整理

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序. 最最开始 先安装socket.io: 1 npm install socket.io 利用Nod ...

  9. socket&period;io入门示例参考

    参考示例地址:http://www.linchaoqun.com/html/cms/content.jsp?menu=nodejs&id=1480081169735

随机推荐

  1. node基本理念(事件、多线程、进程)

    关于node的几点理解: 1.所谓的node单线程,是指node的event loop,也就是我们的业务脚本是跑在一个单线程中的,可以理解为主线程: 2.若存在IO操作,例如文件.网络,是单独在线程里 ...

  2. Bootstrap 一&period; 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题&lt ...

  3. Android:改变Activity切换方式

    overridePendingTransition(enterAnim, exitAnim); Intent intent =new Intent(this,item2.class); startAc ...

  4. java spring 使用注解来实现缓存

    这里举例使用spring3.1.4 + ehcache 注解的方式使用cache 是在spring3.1加入的 使用方法: 1.ehcache依赖+spring依赖 <!-- ehcache依赖 ...

  5. python 时间及日期函数

    本人最近新学python ,用到关于时间和日期的函数,经过一番研究,从网上查找资料,经过测试,总结了一下相关的方法. import timeimport datetime '''时间转化为时间戳: 2 ...

  6. &lbrack;jobdu&rsqb;二进制中1的个数

    做法是n&(n-1).据说还有变态的查表法:http://www.cnblogs.com/graphics/archive/2010/06/21/1752421.html.最后,居然必须用sc ...

  7. vue-devtools(vue 2&period;0)手动安装与使用 &quest; 如何处理Vue&period;js is detected on this page &quest;

    vue-devtools手动安装与使用   一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三. ...

  8. 一篇文章帮你解决python的包管理

    写python代码的人都知道,一个项目写下下来,不可避免的都需要使用很多第三方包,通常我们都是通过pip install ,然而当我们需要上线的时候问题来了,如果中间你自己不记得自己安装了多少个包,这 ...

  9. cnn神经网络入门

    1.神经网络最基本的原理也是函数拟合,所以lose function就显得非常重要了,我们训练的目的之一就是减小损失函数,常用的损失函数参考:https://www.cnblogs.com/hypnu ...

  10. HTML5 本地缓存 window&period;localStorage

    简单运用 html <div onclick="storage('invoice')"></div> js 设置  与 获取 function storag ...