How to Install the Chat Resource

When you're working with alt:V it does not have a built-in chat interface so you must install a third-party chat. Luckily alt:V does provide on in the example resources you download from the website.

We're going to install that chat resource and work with it.

Go to the official alt:V download page and tick resources

Moving and Renaming Files

The chat resource is a little old so we're going to actually move and rename some of the files from the .zip. As well as make some general updates.

Move index.mjs to server folder and rename to chat.js

Move client.js and the folder html to the client folder and rename client.js to chat.js

Import inside Startup

We're going to need to import the chat file on both the server-side and client-side. Each folder has their own respective chat file to import. This can be done by editing the startup.js file for each folder and the doing a simple import. See the reference image below to see if your file structure is correct.

Client Side

/// <reference types="@altv/types-client" />
/// <reference types="@altv/types-natives" />
import * as alt from 'alt-client';
import * as native from 'natives';
import './chat';

alt.log('Hello from client');

We'll need to make some additional changes to client-side code because the chat resource is slightly out of date.

Open chat.js in the client folder.

Change the following line:

let view = new alt.WebView('http://resources/chat/html/index.html');

To

let view = new alt.WebView('http://resource/client/html/index.html');

Server Side

/// <reference types="@altv/types-server" />
import * as alt from 'alt-server';
import chat from './chat';

alt.log('Hello from server');
alt.on('playerConnect', handleConnect);

We'll also need to make an additional change to server-side code for the chat resource. This is to enable better handling of arguments on the recieving end when we are writing our commands.

Open chat.js in the server folder.

Change the following line:

callback(player, args);

To:

callback(player, ...args);

The above change enables better handling of arguments.

Test the Resource

That should be about it for adding chat to your resource. You can verify that chat is working correctly by joining your game and seeing if it loads and typing a few messages.

You should see the following in the top left corner of your game when you join.

Press T to chat and ENTER to send a message.

Now we can work with commands!