Introduction to HTML5 WebSocket 3 - Communication model socket.io

Home

Web Front-end

JS Tutorial

Introduction to HTML5 WebSocket 3 - Communication model socket.io_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

Example

Why was socket.io born? Please see the text description below.

Why do you need socket.io?

Node.js provides an efficient server-side operating environment, but due to the different support for HTML5 on the browser side, in order to be compatible with all browsers, provide an excellent real-time user experience, and provide clients and services for programmers To provide a consistent programming experience, socket.io was born.

The design goal of socket.io is to support any browser and any mobile device. Currently supports mainstream PC browsers (IE, Safari, Chrome, Firefox, Opera, etc.) and Mobile browsers (iphone Safari/ipad Safari/android WebKit/WebOS WebKit, etc.).

Socket.io is based on node.js and simplifies the WebSocket API, unifying various communication APIs. It supports: WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling.

Socket.io solves real-time communication problems and unifies the programming methods of server and client. After starting the socket, it is like establishing a pipeline between the client and the server, and the two sides can communicate with each other.

Install

Execute in the command line: npm install socket.io to install.

Server-side programming model

Server-side programming is still the same as a normal server, starting the server, providing services, and processing events.

For example, the following server.js:

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1 id="Hello-Try-the-a-href-index-html-Socket-io-Test-a">Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' &#63; 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

Client Programming Model

Client programming is also handled in a similar way, connecting to the server and exchanging information.

For example, the following index.html page:

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1 id="Socket-io-Test">Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

Notes

1. To start the server, leave it to node. Open the command line window, navigate to the folder where server.js is located, and enter node server.js to start the server.

In the index.html above, pay attention to this line: . If you don’t want to use the local socket.io script, you can

To directly use the following public script:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

Also note this line: socket = io.connect(null).

The null here represents connecting to the local service, which can be replaced with "localhost" and the effect will be the same.

2. You can use socket.io to start the http service directly.

For example:

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

3. Socket.io can send messages directly through the send method and receive messages using the message event, for example:

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

4. Sending and processing data

Both ends can send events to each other, send data to each other, and communicate with each other. The code to send the event is: socket.emit(action, data, function), where action is the name of the event, data is the data, and function is the callback function; the code to process the event is: socket.on(action, function), if emit sends When there is data, the parameters in the function contain this data. In addition to sending and processing built-in events, socket.io such as connect, disconnect, message. Also allows sending and handling of custom events, such as:

//Server:

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

//Client:

<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>

5. As can be seen from the above, both send and emit can be used when sending data. It's just that emit strengthens the processing of custom events.

6. You can use the get/set method of socket on the server side to store relevant data on the client side, for example:

//Server

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

//Client

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname&#63;'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message&#63;'));
  });
 });
</script>

7. You can broadcast messages, such as sending messages to everyone in the chat room except the current socket connection.

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

8. Multiple independent channels can be established in the same link instead of establishing multiple links. This official name is "multiple namespaces", such as the official example:

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

socket.io configuration

The configuration of socket.io is very simple. If you have configured express, you will find that they use almost the same method. Let’s look at a small example first:

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

As you can see, socket.io uses configure, set, enable, and disable for configuration.

1. Use the configure method to configure the behavior in different operating environments; that is, enable different configuration options in different environments. The first parameter of configure is the running environment, and the second parameter is the function for configuration. The running environment is typically production or development. Of course, any string can be used here. If the first parameter of configure is omitted, it means that the subsequent configuration is public and valid no matter what environment it is.

2. After configuring various operating environments, how do you set which environment it is currently running in? This is achieved by modifying the value of the environment variable NODE_ENV on the command line.

3. In the configure configuration function, we can use set, enable, and disable to set related options.

4. Reference for specific configurable items: https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
Practical reference

Socket.io introduction: http://davidchambersdesign.com/getting-started-with-socket.io/

socket.io installation and usage instructions: http://socket.io/

socket.io Wiki: https://github.com/LearnBoost/Socket.IO/wiki

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python函数介绍：exec函数的介绍及示例Nov 03, 2023 pm 02:09 PM

Python函数介绍：exec函数的介绍及示例引言：在Python中，exec是一种内置函数，它用于执行存储在字符串或文件中的Python代码。exec函数提供了一种动态执行代码的方式，使得程序可以在运行时根据需要生成、修改和执行代码。本文将介绍exec函数的使用方法，并给出一些实际的代码示例。exec函数的使用方法：exec函数的基本语法如下所示：exec

Python函数介绍：abs函数的用法和示例Nov 03, 2023 pm 12:05 PM

Python函数介绍：abs函数的用法和示例一、abs函数的用法介绍在Python中，abs函数是一个内置函数，用于计算给定数值的绝对值。它可以接受一个数字参数，并返回该数字的绝对值。abs函数的基本语法如下：abs(x)其中，x是要计算绝对值的数值参数，可以是整数或浮点数。二、abs函数的示例下面我们将通过一些具体的示例来展示abs函数的用法：示例1：计算

Python函数介绍：sorted函数的功能和示例Nov 03, 2023 pm 02:47 PM

Python函数介绍：sorted函数的功能和示例Python是一门非常强大的编程语言，拥有丰富的内置函数和模块。在这个系列文章中，我们将逐一介绍Python常用的函数，并提供相应的示例来帮助读者更好地理解和应用这些函数。本篇文章将详细介绍sorted函数的功能和示例。sorted函数用于对可迭代对象进行排序，并返回排序后的新列表。可以用于对数字、字

PHP中endwhile关键字的作用和示例Jun 28, 2023 pm 08:00 PM

PHP中endwhile关键字的作用和示例在PHP中，endwhile是一种控制结构，用来实现while循环。它的作用是让程序在满足指定条件的情况下，重复执行一段代码块，直到条件不再满足。endwhile的语法形式如下：while(condition)://循环体代码endwhile;在这个语法中，condition是一个逻辑表达式，当该表达

Python函数介绍：filter函数的作用和示例Nov 04, 2023 am 10:13 AM

Python函数介绍：filter函数的作用和示例Python是一种功能强大的编程语言，提供了许多内置的函数，其中之一就是filter函数。filter函数用于过滤列表中的元素，并返回满足指定条件的元素组成的新列表。在本文中，我们将介绍filter函数的作用，并提供一些示例来帮助读者理解其用法和潜力。filter函数的语法如下：filter(function

Python函数介绍：__import__函数的用法和示例Nov 03, 2023 pm 06:15 PM

Python函数介绍：__import__函数的用法和示例Python作为一门高级编程语言，其强大的函数库以及函数的使用方法也是吸引越来越多开发者以及爱好者的原因之一。在Python中，内置的__import__函数是一个非常强大但比较少用的函数，该函数用于动态导入模块。它接收静态的模块名称并返回已导入的模块对象。Syntax:import(name[,

Python函数介绍：zip函数的介绍及示例Nov 03, 2023 pm 02:02 PM

Python函数介绍：zip函数的介绍及示例Python是一种高级语言，它提供了许多有用的函数来帮助开发人员快速地编写程序。其中一个函数就是zip函数。Zip函数是Python中的内置函数之一，它可以接受一组可迭代对象（包括列表、元组、集合和字典等），并返回一个由这些可迭代对象中的元素按顺序成对组成的元组。Zip函数可以用于多种情况，例如：1.将两个列表的元

PHP的array_walk()函数介绍及示例使用Jun 27, 2023 pm 03:31 PM

在PHP中，有很多实用的函数可以帮助我们更方便地处理数组。其中，array_walk()函数就是一个非常实用的函数，它可以对数组中的每个元素进行指定的操作，让我们来了解一下。array_walk()函数介绍array_walk()函数是一个用于处理数组的函数，它的语法结构如下：array_walk(array&$array,callable$callb

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Two Point Museum: All Exhibits And Where To Find Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

Useful JavaScript development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software