Récupérer la valeur d'un champ en Ajax

Bonjour,

Je fais un petit formulaire en Ajax,

Ce que je fais

Je remplis depuis le navigateur le champs textarea, qui contien une valeur par défaut

    <form id="formulaire" action="{{ path('lire_message',{'id_conversation': conversation.id}) }}" method="post">
        <div class="row">
            <textarea id="valeur_message" name="story" rows="5" cols="33">
                4444554565
            </textarea>

                <div class="col-md-4">
                    <button type="button" id="send_message" class="btn btn-success">Envoyer</button>
                </div>
            </div>
    </form>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var socket = io.connect('localhost:8080');
            socket.on('connected', function(data){
                console.log(data);
            });

            let message = $('#valeur_message').val();

Ce que je veux

Récupérer en la valeur saisi depuis le navigateur et la stocker dans la variable message

Ce que j'obtiens

Jquery me stocke la valeur par défaut du textarea et non pas, la valeur saisi dans le navigateur.