正文

socket.io入门

刘爽_杭州  刘爽_杭州  2022-08-24  267

关键词：

设置一个简单的HTML网页，提供一个表单和一个信息的列表，通过node.js进行框架的搭建

使用node.js框架

1.新建一个chat-example文件夹，并建立一个package.json文件

{

  "name": "socket-chat-example",

  "version": "0.0.1",

  "description": "my first socket.io app",

  "dependencies": {}

}

2. 通过npm安装express，并建立index.js文件配置信息

npm install --save express@4.15.2

var app = require('express')();

var http = require('http').Server(app);

 

app.get('/', function(req, res){

  res.send('<h1>Hello world</h1>');

});

 

http.listen(3000, function(){

  console.log('listening on *:3000');

});

3.在命令行运行node index.js 你可以得到

在浏览器运行http://localhost:3000你可以得到

4.HTML页面的建立

创建index.html,并修改index.js里面的app.get函数，将路由连接到index.Html

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

  </body>

</html>

app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});

5.整合socket.Io

先安装socket.io

npm install --save socket.io

一般安装完，package.json会自动更新，再编辑index.js文件

var app = require('express')();

var http = require('http').Server(app);

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

 

app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});

 

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

  console.log('a user connected');

});

 

http.listen(3000, function(){

  console.log('listening on *:3000');

});

给index.html里面增加js代码，调取socket和jq框架，进行html和http的连接。

<script src="/socket.io/socket.io.js"></script>

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

<script>

  $(function () {

    var socket = io();

    $('form').submit(function(){

      socket.emit('chat message', $('#m').val());

      $('#m').val('');

      return false;

    });

  });

</script>

Index.js修改获取chat message节点，通过控制台查看message

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

  socket.on('chat message', function(msg){

    console.log('message: ' + msg);

  });

});

通过io.emit进行事件发送

io.emit('some event', { for: 'everyone' });

简单起见，我们将发送消息给每个人,包括发送方。

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

  socket.on('chat message', function(msg){

    io.emit('chat message', msg);

  });

});

  <script>

  $(function () {

    var socket = io();

    $('form').submit(function(){

      socket.emit('chat message', $('#m').val());

      $('#m').val('');

      return false;

    });

    socket.on('chat message', function(msg){

      $('#messages').append($('<li>').text(msg));

    });

  });

</script>

socket.io入门原理

1.Socket.IO原理node.js提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket... 查看详情

socket.io入门篇

...mitcode.com/detail/5926e3a056fba70278bf2044.html前言上篇我们介绍了socket.io中room的概念和使用，本篇我们继续深入了解socket.io中namespace（命名空间）的概念和使用。对于namespace的概念只需理解3个地方：1.在不声明新的命名空间情况下，系... 查看详情

socket.io入门

...建一个chat-example文件夹，并建立一个package.json文件{"name":"socket-chat-example","version":"0.0.1","description":"myfirstsocket.ioapp","dependencies":{}}2 查看详情

socket.io入门原理

socket.io入门，简易聊天室(代码片段)

...。所以我们需要一个可以由服务端主动发出的协议，即WebSocket。WebSocket是HTML5新增的一种通信协议，其特点是服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正的双向平等对话，属于服务器推送技... 查看详情

socket.io快入入门案例

socket.io基本介绍创建一个nodejs项目步骤1：创建项目目录步骤2：初始化nodejs项目目录结构命令：npminit-f结果如下：在nodejs项目安装socket.io模块命令：npminstallsokcet.iosocket.io网站：https://socket.io/socket.io快速入门案例客户端：index.html&l... 查看详情

Socket IO 将 TCP 套接字消息输出到网页

】SocketIO将TCP套接字消息输出到网页【英文标题】：SocketIOtooutputaTCPsocketmessagetoawebpage【发布时间】：2018-05-1415:53:02【问题描述】：我正在试验NodeJS和SocketIO。我在这里查看了Socket.IO入门指南：https://socket.io/get-started/chat/。代码如... 查看详情

/socket.io/socket.io.js 中不提供 Socket.io

】/socket.io/socket.io.js中不提供Socket.io【英文标题】：Socket.ioisnotservedin/socket.io/socket.io.js【发布时间】：2012-12-2420:46:28【问题描述】：我已在此处阅读有关我在node.js中的问题的答案，但我的问题仍然存在。在服务器中使用socket.io，... 查看详情

Express.js 'socket.io/socket.io.js 404'

】Express.js\\\'socket.io/socket.io.js404\\\'【英文标题】：Express.js\'socket.io/socket.io.js404\'Express.js\'socket.io/socket.io.js404\'【发布时间】：2017-02-0207:36:19【问题描述】：我正在尝试在使用ExpressJS的网站http://clickthebutton.herokuapp.com上合并实查看详情

socket.io中文手册socket.io中文文档

socket.io中文手册，socket.io中文文档转载于：http://www.cnblogs.com/xiezhengcai/p/3956401.html服务端io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit(‘String’,data);//给所有客户端广播消息io.socket 查看详情

socket.io中文手册socket.io中文文档

未找到 Socket.io.js（node.js + express + socket.io）

】未找到Socket.io.js（node.js+express+socket.io）【英文标题】：Socket.io.jsnotfound(node.js+express+socket.io)【发布时间】：2014-10-2022:06:51【问题描述】：我一直在检查其他相关答案，例如：node.js/socket.io/socket.io.jsnotfoundSocket.ionotbeingservedbyNode.j... 查看详情

使用androidnodejs和socket.io创建一个实时聊天应用程序(代码片段)

介绍WebSockets是非常漂亮的工具，它允许我们在现代Web应用程序中建立实时通信。事实上，这个机制非常强大，它被用来构建不同类型的应用程序，如实时聊天或通知系统等。在本文中，我们将向您展示如何使... 查看详情

socket.io，io 未定义（JS 错误）

】socket.io，io未定义（JS错误）【英文标题】：socket.io,ioisnotdefined(JSError)【发布时间】：2011-08-0322:25:59【问题描述】：我刚开始使用socket.io，它在客户端页面上给出JS错误io未定义如何解决这个问题？【问题讨论】：【参考方案1】... 查看详情

socket.io 中 io.on 和 socket.on 的区别

】socket.io中io.on和socket.on的区别【英文标题】：Differenceinio.onandsocket.oninsocket.io【发布时间】：2021-09-2612:55:06【问题描述】：此图是否正确表示节点js服务器中的io和套接字？我想说的是......首先我们写-constio=require("socket.io")(8080);... 查看详情

在 socket.io 的情况下出现错误“XMLHttpRequest 无法加载 /socket.io”

】在socket.io的情况下出现错误“XMLHttpRequest无法加载/socket.io”【英文标题】：Gettingerror\'XMLHttpRequestcannotload/socket.io\'incaseofsocket.io【发布时间】：2015-05-0506:25:14【问题描述】：我收到错误消息：“XMLHttpRequestcannotload/socket.io”forsock... 查看详情

( Socket.io ) 一个socket连接多个房间

】(Socket.io)一个socket连接多个房间【英文标题】：(Socket.io)Onesocketconnectionmultiplerooms【发布时间】：2016-12-1405:28:53【问题描述】：我在使用socket.io时遇到问题。我尝试创建一个连接到多个房间的单套接字连接。这是我当前的代码：... 查看详情