Recently, I squeezed some time in the busy business development to think whether we can improve the efficiency of b-side products through the “front-end” capabilities.

I plan to use the dialogue (message) system as a starting point to improve the internal communication efficiency of users of the B-end system, improve the reach rate of important announcements or software upgrade notices, and form a closed loop of software use problems and user experience feedback, so that products and developers can hear the voice of users of the B-end.

The current situation is that various communication groups are scattered, sometimes a wechat group and sometimes a Dingding group, while the APP at the B end is the APP that touches all users at the B end. Why don’t we directly improve efficiency through it? On the other hand, companies have more control over their data.

When I was in the original department, I made a small Demo due to business needs, but now it is buried by heavy business development 😭. I hope I can become a Node developer as soon as possible. Will the Leader consider me to transfer to 😁 when he sees my article?

At present, the project is under development, and I will give you a detailed design idea in the subsequent article sharing. First, I will keep you in suspense:

  • Server-side stack: Nest.js + TypeScript + TypeOrm;
  • B terminal: React Native;
  • React notification management, of course, is not the Web side.

In this article, I’ll take a look at the basic API of socket. IO.

The original article notes are at 📒 : es8.es/post/Socket…

Actual work intelligent robot small Demo: ES7. Es

Es7.es /websocket/l… .

The Demo is very rough, so everybody spray it lightly.

The service side

  • Listening for a client connection, the callback function passes the socket object for the connection
io.on('connection'.function(socket){});
Copy the code
  • Broadcast messages to all clients
io.sockets.emit('key', data);
Copy the code
  • Sends a message to the specified client
io.sockets.socket(socketid).emit('key', data);
Copy the code
  • Listen for messages sent by clients
socket.on('key'.function(data) {});
Copy the code

Sends a message to the client of the socket

socket.emit('key', data);
Copy the code

Broadcast messages

Broadcast messages to clients other than yourself

socket.broadcast.emit('key', {data: 'everyone'});
Copy the code

Emit IO. Sockets. Emit (‘key’, {data: ‘all’});

grouping

socket.on('group1'.function (data) {
    socket.join('group1');
});
socket.on('group2'.function (data) {
    socket.join('group2');
});
Copy the code
Client send

Add the user to group1

socket.emit('group1');
Copy the code

Add the vm to group2

socket.emit('group2');
Copy the code

A client can have multiple groupings (subscription mode)

Play group

socket.leave(data.room);

Sends messages to users in a group

Not including myself

socket.broadcast.to('group1').emit('key', data);
Copy the code

Including myself

io.sockets.in('group1').emit('key', data);
Copy the code

Gets the client socket for the connection

io.sockets.clients().forEach(function (socket) {
    console.log(socket);
});
Copy the code

Obtaining Group Information

Get all room (group) information

io.sockets.manager.rooms
Copy the code

Gets information about the room this socketid entered

io.sockets.manager.roomClients[socket.id]
Copy the code

Get the Particular Room client and return all socket instances in the room

io.sockets.clients('particular room');
Copy the code

Another way of grouping

The service side

io.of('/some').on('connection'.function (socket) {
    socket.on('test'.function (data) {
        socket.broadcasst.emit('event_name'{}); }); });Copy the code

The client

var socket = io.connect('ws://localhost:1234/some');
socket.on('event_name'.function (data) {
    console.log(data);
});
Copy the code

The client is linked to ws:///localhost:1234 but the server can filter it out with IO. Of (‘/some’).

IO provides four configuration apis: IO. Configure, IO. Set, IO. Enable, and IO. IO. Set sets a single item, and IO. Enable and IO. Disable are used for Boolean configuration of a single item. IO. Configure lets you configure different parameters for different production environments such as Devlopment, Test, and so on.

The client

Set up a socket connection

var socket = io("ws://localhost:1234");
Copy the code

Listening for service messages

socket.on('msg'.function(data) {// Send a message to the server socket.emit('msg'{}); });Copy the code

The listening socket is disconnected and reconnected

socket.on('disconnect'.function() {
    console.log("Disconnection from service");
});

socket.on('reconnect'.function() {
    console.log("Reconnect to the server");
});
Copy the code

Client socket.on() listens for:

Connect_failed: disconnect: connecting connect_failed: Error: an error occurs and cannot be processed by other event types message: Message event on the same server. Anything: Message event on the same server. Reconnect_failed: reconnection failedCopy the code
  • When connecting for the first time, events are triggered in the following sequence: connecting-> Connect.
  • When a connection is lost, the event is triggered in the following sequence: disconnect->reconnecting ->connecting->reconnect->connect.
Related issues:

Problems with ThinkJS: github.com/thinkjs/thi…

Author: Black Horse big front end Cuitianze