Node js socket io

Одним из лучших способов понять работу WebSocket, это написание чата, который позволяет людям общаться в режиме реального времени. И именно это мы разберем в этой статье.

Все мы помним конструкции , которые мы писали 10(или 15) лет назад. Конечно это очень простое выражение, и мы не будем забывать когда-то так популярное выражение . За это время JavaScript быстро развивалась в DOM манипулировании с помощью различных фреймворков и библиотек, таких как Prototype и jQuery. Используя эти методы, можно создавать AJAX запросы, кнопки добавления и удаления элементов интерфейса, карусели, лайт боксы…

возможности бесконечны. И когда мы подумали что вот оно, JavaScript развивается и становится все лучше и лучше — в результате мы имеем NodeJS, AngularJS, BackboneJS и кучу новых фреймворков JavaScript, которые помогут достичь очень многого.

Когда я впервые услышал о NodeJS, мои мысли были: "Что за выдумка! Серверный JavaScript?". Я не мог себе этого представить, ведь мои знания ограничивались моим предыдущим, хоть и несколько ограниченным знанием этого языка. Однажды я начал работать с nodeJS и сразу все понял. Просто для того что бы дать Вам немного объяснений: nodeJS использует движок Google V8 JavaScript, который сам по себе невероятно быстр.

В базовом приложении nodeJS, есть возможность создать свой собственыый веб-сервер(это означает что больше не нужно использовать Apache или Nginx). Также мы добавим Socket.IO, который является отличным решением для создания приложений, которые работают в любом браузере, включая мобильные устройства. Socket.IO позволяет отправлять сообщения между клиентом(браузер) и сервером(WebSocket сервер). Он является одним из самым востребованным для создания приложений чата, где каждый пользователь, который подключается к клиенту, имеет возможность получаеть ответы от всех подключенных пользователей — идеальное решение для чата, не так ли?

Вот список главных особенностей, которые я собираюсь продемонстрировать:

  • Люди могут входить от своего имени в чат
  • Затем они подключаются к серверу WebSocket
  • WebSocket сервер отправляет сообщение с подтверждением клиенту, а так же уведомляет других клиентов о том, что кто-то подключился
  • Пользователи имеют возможность обмениваться сообщениями
  • Уведомление подключенных клиенов когда кто-то вышел из чата
  • Уведомлять подключенных клиентов, если сервер WebSocket выключается

В первую очередь мя создадим WebSocket сервер, который будет принимать соединения на .

Мы так же будем хранить список подключенных пользователей:

Каждое событие, которое должно произойти, пока WebSocket работает, должно быть обернуто в специальную функцию: . Итак наши события:

  • подключение пользователя
  • отправка сообщения
  • отключение пользователя

Давайте опишим наши события:

Сервер WebSocket будет "слушать" функцию , которая будет уведомлять подключенных клиентов(как мы увидим позднее, это вызывается через событие нажатия кнопки). Функция отправит параметр , который затем добавится в хэш с уникальным идентификатором подключенного сокета. Как только он будет сохранен, WebSocket отправит уведомление(), нашему клиенту(обратите внимание, что отправит сообщение только клиенту, который его "слушает", тогда как отправит уведомление всем пользователям). Другими словами, уведомление "Вы подключились к серверу." увидет клиент, который только что подключился, в то время как два других, будут оправляться всем подключенным клиентам, включая подключенного в данный момент пользователя.

Следующая функция, это функция , которая отправляет всем сведения об авторе и само сообщение.

— обеспечивает уведомление всех пользователей, когда один из них отключился и обновляет хэш у всех пользователей.

Давайте посмотрим как это выглядит на стороне клиента:

Тут нет ничего не обычного. Это просто HTML страница, которая использует Bootstrap библиотеку. А теперь давайте вставим этот JavaScript код между тегами .

Socket.IO enables real-time event-based communication between one or more clients and a server. It works on every platform, browser or device and is fast and reliable. It’s often used in analytics, document collaboration, streaming and instant messaging.

Socket.IO is smart, it uses WebSockets if available. If not it fails over to something the browser does support. It’s easy to setup and use so let’s take a look!

In this tutorial we’ll cover setting up a basic Express.js application with Socket.IO. We’ll create a simple chat server and show the basics on how a client and server works. If you like to take a look at the code it’s up on Github.

Requirements

In this tutorial we’ll be using the latest Express and Socket.io versions as of 2017.

  • Express 4
  • Socket.IO 1.7.2

If you’re using a later version this tutorial will probably still work. Just keep in mind this is what I’ve tested with.

Getting Started

We’ll assume before we begin that you have node and npm installed. If not, I’d highly recommend downloading and installing NVM. NVM is a version manager for node. It’s available on Mac, Windows and Linux so you have no excuse for not using it. Once node is installed you’ll have access to npm, the node package manager.

Let’s create a blank project!

The npm init command will create an empty project with a package.json file. If you like you can answer all the questions. If not just press enter through all of it.

We need to install Express and Socket.IO and save them to our package.json file for later.

The —save will make sure the package will appear in our dependencies in the package.json file. This is important, so we can later install the packages again if needed without having to remember them all.

In past tutorials I suggested at this point to install bower. Bower is a package manager for the web. It can handle a lot of things from frameworks, libraries, assets and utilities.

Unfortunately, there are some problems with using bower so I’d recomend with just sticking with npm.

For this simple example we’ll use npm to install jquery.

That should be it! The last command will save jquery to our package.json file and download everything into the node_modules folder.

Express Server

Let’s begin by creating an express server that displays Hello World. I talked a lot about Express in my getting started guide. Check it out if you need help.

Create a new file called app.js in your socket-app folder.

Lots of things are happening in this file. First we are requiring Express, and creating a new server. We are then requiring Socket.IO. We are setting the static folder to ‘/node_modules’ since we are using npm to server up jQuery and we want to be able to reference it in our html.

App.get routes http requests to the specified path with a specific call back function.

The ‘res’ object represents the HTTP response that an Express app sends when it gets a request. The ‘sendFile’ just sends the file at the specific path. We’ll be creating the index.html in a second. ‘server.listen’ will open a port and listen for requests coming in.

Create a new index.html file. This will display our «Hello World» message.

This just simple html with a form box and a div. As you can see from the bottom the script src are pointing to files in our node_modules folder.

Fire up the server and make sure everything works!

Open up a browser at http://localhost:4200 and you should see this page. Of course the box doesn’t do anything right now, we’ll get to that soon.

Client Socket Emit

First thing we want to do is see if we can get the client to connect to the server with Socket.IO and have it respond in the console.

First we’ll edit our index.html file. Add this script to the bottom of the file.

The socket.on(‘connect’) is an event which is fired upon a successful connection from the web browser. We then have a function callback that will send to the server the hello world message.

Let’s add in this code to the app.js file at the bottom, just before the server.listen.

The io.on is listening for connections. When it receives one it will report to the console client connected…. You can then setup a number of individual events for it to listen to from the client. The ‘client.on(‘join’) will wait for a message from the client for ‘join’. It will then log it to the console.

If we start up our node server again we’ll see on the node console the message ‘Hello World from client’. Perfect.

Server Socket Setup

Let’s have the server respond back with a message to the client. Add the emit line after console.log.

The client.emit will send a message back to the client that just connected with a message using ‘messages’.

Add a new socket.on messages event in the index.html.

Now when a client connects it will send a message to the server and it will trigger a popup.

Putting it all Together

In the previous examples we saw that we can send a message to the server. We can also send a message back to the client. What if we want to send a message to all the clients excluding the socket that started it? We can do easily with broadcast.emit.

First let’s update our JavaScript in our index.html

Here we added in a new JQuery .submit event handler which will prevent the form from submitting and instead send a message to the server with the values of the input field in messages.

In addition, we added a new socket event listener for ‘broad’ which will simply update our div with the message that was returned.

We’ll need to update the server with new broadcast.

You can see we are listening on messages. After receiving data we simply inform all other clients, including the socket that sent the message, the data.

If we restart the app.js file we’ll see we can now send messages to all other clients when we type anything into our input box and press submit. The div under the hello world message should update.

Open up two browser windows and give it a shot. You should see messages being sent between both of them.

Conclusion

This was a quick introduction on using Express, Socket.IO and Node.js. If your brave enough try to finish this example and create a fully functional chat program. You can see an example of that here.

What do you think of Socket.IO? Do you use it? Leave a comment below!

Моя реализация будет очень наивной и упрощенной, без компенсации отставания, экстраполяции и т.д., но она должна указывать на общую концепцию «многопользовательской» работы с node.

Я думаю, что самый простой подход — иметь ассоциативный массив, содержащий игроков (сущностей) как на клиенте, так и на сервере. Затем с клиентской стороны вы отправляете команды типа и обрабатываете эту команду с помощью логики сервера (где работает настоящая игра). Каждому сокету следует назначить объект или идентификатор игрока, чтобы вы могли получить к нему доступ, например:

Затем каждый скажет 100мс, что вы могли бы отправить моментальные снимки всем связанным игрокам:

И затем на стороне клиента получают данные и интерполируют от старых к новым значениям.

Это достаточный алгоритм для игры в полу-аркаду с максимум 20 объектами.

Уменьшение интервала моментального снимка делает его почти подходящим для стратегической игры с большим количеством объектов. Ваш главный враг — использование полосы пропускания, которое можно уменьшить, минимизируя размер пакета. Например, прочитайте о BiSON, LZW и не отправляйте данные, которые не изменились с момента последнего моментального снимка.

Моя репутация не позволяет мне публиковать все ссылки, поэтому я добавил их сюда: http://pastebin.com/Kh3wvF1D

Общее введение в многопользовательские концепции Гленна Фидлера:

http://gafferongames.com/networking-for-game-programmers/what-every-programmer-needs-to-know-about-game-networking/

Некоторые многопользовательские методы от Quake: Это даст вам подсказку об интерполяции и экстраполяции (предсказании)

http://fabiensanglard.net/quakeSource/quakeSourcePrediction.php

Статья клапана о компенсации задержек и общих оптимизациях:

https://developer.valvesoftware.com/wiki/Latency_Compensating_Methods_in_Client/Server_In-game_Protocol_Design_and_Optimization

Многопользовательские методы в Age of Empires:

http://zoo.cs.yale.edu/classes/cs538/readings/papers/terrano_1500arch.pdf#search=%22Real%20time%20strategy%20networking%20lockstep%22

Вы также можете прочитать мою статью об оптимизации использования полосы пропускания

http://rezoner.net/minimizing-bandwidth-usage-in-html5-games-using-websocket,299

+1 для Ivo Wetzel Mapple.js это большая куча знаний.

https://github.com/BonsaiDen/Maple.js

ответ дан rezoner 27 янв.

'12 в 18:07

источникподелиться

Добавить комментарий

Закрыть меню