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

先安装socket.io:

  1. 1 npm install socket.io

利用Node的搭建Http服务

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

  1. app.js
  2. 01 var app = require('http').createServer(handler)
  3. 02 , io = require('socket.io').listen(app)
  4. 03 , fs = require('fs')
  5. 04
  6. 05 app.listen(80);
  7. 06
  8. 07 function handler (req, res) {
  9. 08 fs.readFile(__dirname + '/index.html',
  10. 09 function (err, data) {
  11. 10 if (err) {
  12. 11 res.writeHead(500);
  13. 12 return res.end('Error loading index.html');
  14. 13 }
  15. 14
  16. 15 res.writeHead(200);
  17. 16 res.end(data);
  18. 17 });
  19. 18 }
  20. 19
  21. 20 io.sockets.on('connection', function (socket) {
  22. 21 socket.emit('news', { hello: 'world' });
  23. 22 socket.on('my other event', function (data) {
  24. 23 console.log(data);
  25. 24 });
  26. 25 });

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

  1. index.html
  2. 1 <script src="/socket.io/socket.io.js"></script>
  3. 2 <script>
  4. 3 var socket = io.connect('http://localhost');
  5. 4 socket.on('news', function (data) {
  6. 5 console.log(data);
  7. 6 socket.emit('my other event', { my: 'data' });
  8. 7 });
  9. 8 </script>

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

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

v

  1. ar app = require('express')()
  2. , server = require('http').createServer(app)
  3. , io = require('socket.io').listen(server);
  4. server.listen(80);
  5. app.get('/', function (req, res) {
  6. res.sendfile(__dirname + '/index.html');
  7. });
  8. io.sockets.on('connection', function (socket) {
  9. socket.emit('news', { hello: 'world' });
  10. socket.on('my other event', function (data) {
  11. console.log(data);
  12. });
  13. });

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

  1. // note, io.listen(<port>) will create a http server for you
  2. var io = require('socket.io').listen(80);
  3. io.sockets.on('connection', function (socket) {
  4. io.sockets.emit('this', { will: 'be received by everyone'});
  5. socket.on('private message', function (from, msg) {
  6. console.log('I received a private message by ', from, ' saying ', msg);
  7. });
  8. socket.on('disconnect', function () {
  9. io.sockets.emit('user disconnected');
  10. });
  11. });

存储数据 有的时候需要存储一些和客户端关联的数据在会话里,socket.io也是支持的,代码如下:

  1. var io = require('socket.io').listen(80);
  2. io.sockets.on('connection', function (socket) {
  3. socket.on('set nickname', function (name) {
  4. socket.set('nickname', name, function () {
  5. socket.emit('ready');
  6. });
  7. });
  8. socket.on('msg', function () {
  9. socket.get('nickname', function (err, name) {
  10. console.log('Chat message by ', name);
  11. });
  12. });
  13. });

socket.set和socket.get方法分为用于设置和获取变量。

设置命名空间 有的时候要一个程序支持多个应用,如果使用默认的 “/” 命名空间可能会比较混乱。如果想让一个连接可以支持多个连接,可以使用如下的命名空间的方法:

  1. app.js
  2. var io = require('socket.io').listen(80);
  3. var chat = io
  4. .of('/chat')
  5. .on('connection', function (socket) {
  6. socket.emit('a message', {
  7. that: 'only'
  8. , '/chat': 'will get'
  9. });
  10. chat.emit('a message', {
  11. everyone: 'in'
  12. , '/chat': 'will get'
  13. });
  14. });

var news = io .of(’/news’) .on(‘connection’, function (socket) { socket.emit(‘item’, { news: ‘item’ }); });

  1. client.js
  2. <script>
  3. var chat = io.connect('http://localhost/chat')
  4. , news = io.connect('http://localhost/news');
  5. chat.on('connect', function () {
  6. chat.emit('hi!');
  7. });
  8. news.on('news', function () {
  9. news.emit('woot');
  10. });
  11. </script>

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

  1. app.js
  2. var io = require('socket.io').listen(80);
  3. io.sockets.on('connection', function (socket) {
  4. socket.on('ferret', function (name, fn) {
  5. fn('woot');
  6. });
  7. });
  8. client.html
  9. <script>
  10. var socket = io.connect(); // TIP: .connect with no args does auto-discovery
  11. socket.on('connect', function () { // TIP: you can avoid listening on `connect` and listen on events directly too!
  12. socket.emit('ferret', 'tobi', function (data) {
  13. console.log(data); // data will be 'woot'
  14. });
  15. });
  16. </script>

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

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

我写的聊天程序:

index.html

  1. <script src="/socket.io/socket.io.js"></script>
  2. <script>
  3. var socket = io.connect('http://localhost');
  4. socket.on("notice", function(data){
  5. var msg = document.getElementById('all').value;
  6. document.getElementById('all').innerText = msg + "\n" + data.message;
  7. });
  8. var chat_fn = function(){
  9. var msg = document.getElementById("message").value;
  10. socket.emit("chat", {message: msg});
  11. };
  12. socket.on("nickname ready", function(data){
  13. alert("nickname changed.");
  14. });
  15. var change_nickname = function(){
  16. var nickname = document.getElementById("nickname").value;
  17. socket.emit('set nickname', nickname);
  18. };
  19. </script>
  20. <textarea id="all" cols=40 rows=20></textarea>
  21. <br />
  22. <label>Message:</label>
  23. <input id="message" type="text" name="message" cols=120/>
  24. <input id="chat_btn" type="button" value="chat" onclick="javascript:chat_fn()" />
  25. <label>NickName:</label>
  26. <input id="nickname" typee="text" name="nickname" />
  27. <input id="chang_name" type="button" value="nickname" onclick="javascript:change_nickname()" />

app.js

  1. var app = require('http').createServer(handler)
  2. , io = require('socket.io').listen(app)
  3. , fs = require('fs');
  4. app.listen(80);
  5. function handler (req, res) {
  6. fs.readFile(__dirname + '/index.html',
  7. function (err, data) {
  8. if (err) {
  9. res.writeHead(500);
  10. return res.end('Error loading index.html');
  11. }
  12. res.writeHead(200);
  13. res.end(data);
  14. });
  15. }
  16. io.sockets.on('connection', function (socket) {
  17. // socket.emit('news', { hello: 'world' });
  18. // socket.on('my other event', function (data) {
  19. // console.log(data);
  20. // });
  21. socket.set('nickname', 'nickname', function(){
  22. });
  23. socket.on('set nickname', function(name){
  24. socket.set('nickname', name, function(){
  25. console.log("change nickname=>" + name);
  26. socket.emit('nickname ready');
  27. });
  28. });
  29. socket.on('chat', function(data){
  30. socket.get('nickname', function(err, name){
  31. socket.emit("notice", {message: name + ":" + data.message});
  32. socket.broadcast.emit("notice", {message: name + ":" + data.message});
  33. console.log("chat: " + data.message);
  34. });
  35. });
  36. });
  37. 来源:https://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

socket.io入门整理的更多相关文章

  1. socket.io入门整理教程

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

  2. Socket.io 入门 - Renyi的博客

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

  3. 转载:socket.io 入门

    原文链接:http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264 我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单 ...

  4. Node.js、Express、Socket.io 入门

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

  5. socket.io 入门教程

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

  6. socket.io 入门篇(三)

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

  7. socket.io 入门篇(二)

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

  8. socket.io 入门篇(一)

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

  9. socket.io入门示例参考

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

随机推荐

  1. UIKit中的几个核心对象的介绍:UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  2. CF995A Tesla

    题目描述 Allen dreams of one day owning a enormous fleet of electric cars, the car of the future! He kno ...

  3. 使用Visual C ++和Open Folder自定义环境

    使用Visual C ++和Open Folder自定义环境 来源 https://blogs.msdn.microsoft.com/vcblog/2016/10/05/bring-your-c-co ...

  4. 【题解】51nod1967 路径定向

    第一次写欧拉回路,实际上只要dfs下去就可以了,反正每条边都是要遍历一遍的…… 关键有两个性质:1.一个无向图存在欧拉回路,当且仅当该图所有顶点度数都为偶数,且该图是连通图.2.一个有向图存在欧拉回路 ...

  5. POJ3347:Kadj Squares——题解

    http://poj.org/problem?id=3347 题目大意:给定一些正方形的边长,让他们尽可能向左以45°角排列(不能互相重合),求在上面看只能看到哪几个正方形. ———————————— ...

  6. BZOJ3670 [Noi2014]动物园 【KMP计数】

    3670: [Noi2014]动物园 Time Limit: 10 Sec  Memory Limit: 512 MB Submit: 3143  Solved: 1690 [Submit][Stat ...

  7. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  8. 继续bzoj

    我应该可以打卡下班了,回来继续bzoj

  9. 【数论数学】【P2152】【SDOI2009】Super GCD

    传送门 Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约 数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了 ...

  10. Nginx反向代理两个tomcat服务器

    第一步,在Linux上安装两个tomcat,修改好端口号后,启动起来. 第二步,配置本地的DNS解析,即修改host文件: 第三步,配置Nginx配置文件 反向代理的配置虚拟主机配置差不多也要配置虚拟 ...