General setup

[xapss]

Client code:

import socket from "socket.io-client";

export default function CommentsBlock() {
  const io = socket("http://localhost:1337", { transports: ["websocket"] });
  useEffect(() => {
    io.on("connect", async (data, error) => {
      console.log("connected");
        io.on("comment.create", (data) => {
          console.log('creation');
        });
    });
  });
  return <div>Comments 2</div>;

Server code:

  io: {
    enabled: true,
    config: {
      IOServerOptions: {
        cors: { origin: "http://localhost:3000", methods: ["GET"] },
      },
      contentTypes: {
        comment: "*",
      },
      events: [
        {
          name: "connection",
          handler: ({ strapi }, socket) => {
            console.log("user connected");
            strapi.log.info(`[io] new connection with id ${socket.id}`);
            strapi.$io.emit("api::comment.comment.create", data);
          },
        },
        {
          name: "comment.create",
          handler: ({ strapi }, socket) => {
            console.log("test create");
            strapi.log.info(`[io] new connection with id ${socket.id}`);
            strapi.$io.emit("api::comment.comment.create", data);
          },
        },
      ],
    },
  },
});

In frontend, websockets connect properly. I get the message 'connected' when it loads.
However, in the backend, I get nothing.
When I create a new comment in the admin, nothing happens either.

What am I missing here? Thanks!

[ComfortablyCoding]

The events settings array is for custom emits (aside from built in events like connection) done on the server. You need to emit the others yourself. Only the contentTypes property is needed for the automated content type events to trigger.

The comment type should emit with the settings outlined above, looks like your syntax for listening on the client side incorrect. It should be comment:create not comment.create per the emit syntax in the readme.

If you are still not receiving the events then make sure the jwt role has permissions set correctly in role settings for that content type (e.g. if you are listening for comment create, then the role needs the create permission checked for the comment content type).

Hope that clears things up.

[xapss]

Ok, update: automated content type events are working nicely.

Now I would like to add custom events. I'm confused now by the docs. Do I understand it correctly that the strapi.$io.raw emit can go into a controller? Cause it gives an undefined $io for me.

Thank you for the help!

// src/api/answer/controllers/answer.ts

import { factories } from "@strapi/strapi";

export default factories.createCoreController(
  "api::answer.answer",
  ({ strapi }) => ({
    async customAction(ctx) {
      // my custom action here
      const data = 'hello world';

      strapi.$io.raw("customAction", data);

      return data;
    },
  })
);

// plugins.ts
  io: {
    enabled: true,
    config: {
      IOServerOptions: {
        cors: { origin: "http://localhost:3000", methods: ["GET"] },
      },
      events: [
        {
          name: "connection",
          handler: ({ strapi }, socket) => {
            console.log("user connected");
            strapi.log.info(`[io] new connection with id ${socket.id}`);
          },
        },
        {
          name: "answer.customAction",
          handler: ({ strapi }, socket) => {
            strapi.log.info(`[io] new custom action on ${socket.id}`);
          }
        }
      ],
    },
  },

[ComfortablyCoding]

Yes it should be valid there. The $io property should be available anywhere the strapi object is defined.

It's possible an additional type deceleration/modification is needed on the Strapi global object for it to be available for typescript. Will need to look into this.

[lionhu]

how to fetch data in events.answer.customAction, or call a controller within handler.
any custom event example of client and server code will be helpful.
thank you very much!
events: [
...
{
name: "answer.customAction",
handler: ({ strapi }, socket) => {
strapi.log.info([io] new custom action on ${socket.id});
}
}
],

[xapss]

It turns out, i bluntly copied the ts code, without actually realising the data was a variable i still had to declare ofc.. it didn't produce any errors so didn't realise it.

The strapi.$io.emit("api::comment.comment.create", data); only works if data is defined ofc. duh :)

Thanks for your response!

[lionhu]

It works good without jwt token.
but when I try to attach jwt token as following, I was rejected.
JWT_TOKEN can be printed without any problem.

I also tried ignore "Bearer", but also rejected.
token: JWT_TOKEN.value,

Am I missing anything?

==========================================
import { io } from 'socket.io-client'
const SERVER_URL = 'http://localhost:1337'
const JWT_TOKEN = useStrapiToken()

console.log('JWT_TOKEN', JWT_TOKEN.value)
// const socket = io(SERVER_URL)
const socket = io(SERVER_URL, {
auth: {
token: Bearer ${JWT_TOKEN.value},
},
})
socket.on('connect', () => {
console.log('connected')

socket.on('profile:update', (data) => {
console.log(data)
})
})

[lionhu]

I finally solved the problem. It worked!

const socket = io(SERVER_URL, {
auth: {
token: JWT_TOKEN.value,
},
})