Creating chat client-server

[Billiardist94]

Hi! I try to create my application - Chat online, to integrate it on my site and chatting with my collaborators in Slack. Only send and receive messages. I initialized server but I don't know, how to connect it with html file. My server js file: My html file:

Packages:

Select all that apply:

• [x] @slack/web-api
• [ ] @slack/rtm-api
• [ ] @slack/webhooks
• [ ] @slack/oauth
• [x] @slack/socket-mode
• [ ] @slack/types
• [ ] I don't know

Reproducible in:

The Slack SDK version

my package.json:

Node.js runtime version

v14.19.1

OS info

Windows 10 Home, 21H1, 27.‎12.‎2021, 19043.1889

Steps to reproduce:

1. Create server js file
2. Create html file
3. Start server

Expected result:

Connect html with server js file to display chat messages

Actual result:

Connection problem. The question is how to connect them?

Requirements

For general questions/issues about Slack API platform or its server-side, could you submit questions at https://my.slack.com/help/requests/new instead. :bow:

Please read the Contributing guidelines and Code of Conduct before creating this issue or pull request. By submitting, you are agreeing to those rules.

[mwbrooks]

Hi @Billiardist94 👋🏻 Thanks for the detailed message and screenshots!

⚠️ I noticed that I could still read your token information in the first screenshot. I've updated the screenshot to hide the tokens, but I'd recommend that you generate new tokens using api.slack.com/apps for safety.

node-slack-sdk is a Node.js module that is designed to run on server-side. Traditionally, if you wanted to display content on an HTML page, then you'd create an ExpressJS server that starts a socket mode connection and listens for Slack activity. You would then have an HTML page that is served by the ExpressJS server. You could use a web socket connection or long polling of an API endpoint that you write to send/receive content from your HTML page.

In your example, it looks like you're writing a CommonJS HTML page and you're trying to use node-slack-sdk inside of the browser. Is that correct?

[Billiardist94]

Dear @mwbrooks, Thank you for your response! I'm using server initialization in separate js file. Just add ExpressJS. Try to connect with slack to listen events, but so far unsuccessful. This is my another js file with client side to render chat in browser: In Browser chat looks like this: In assets folder I keep client files js and css.

[mwbrooks]

Hey @Billiardist94 👋🏻 Thanks for clarifying that you're running an Express server and the upload those screenshots.

The setup of your socket mode client looks correct. However, you should listen for a message event instead of a chat message event. Here is an example of the listening for the message event with socket mode:

socketModeClient.on('message', async ({ event }) => {
  console.log(event);
});

After making that update, I can you can see message events displaying in your server logs!

[Billiardist94]

Dear @mwbrooks, Yes, thank you! I changed event to message. And I can receive messages coming from Slaсk. For some reason they are duplicated. I sent one message, and they come a few of the same.

Now I'm going to set up sending messages to Slack. Could you tell me, would it be good to send messages through WebHooks?

[Billiardist94]

Dear @mwbrooks Maybe you can help me to recieve message from Slack to my custom chat. I use chat.postMessage to send message from my custom chat to Slack, but how can I recieve message from Slack? Should this be done with Events API (event type - message)? appBolt.event("message", ({ event, say }) => { say(event) return event; }); Please tell me how to combine event with socket to send message data to client? This is my server js:

This is my client: Thank you!

[github-actions[bot]]

👋 It looks like this issue has been open for 30 days with no activity. We'll mark this as stale for now, and wait 10 days for an update or for further comment before closing this issue out. If you think this issue needs to be prioritized, please comment to get the thread going again! Maintainers also review issues marked as stale on a regular basis and comment or adjust status if the issue needs to be reprioritized.

[github-actions[bot]]

As this issue has been inactive for more than one month, we will be closing it. Thank you to all the participants! If you would like to raise a related issue, please create a new issue which includes your specific details and references this issue number.