/So-simple-chat

Simple chat app with WebSockets where both front and back are in single Nuxt.JS project.

Primary LanguageVueMIT LicenseMIT

So simple chat

Simple chat app with WebSockets ( express-ws ) where both front and back are in single Nuxt.js project.

About

This project shows how to build simple application with WebSockets in Nuxt.js.

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

For detailed explanation on how things work, check out Nuxt.js docs.

Code

Most important part is opening websocket in the server/index.js:

...
var expressWs = require('express-ws')(app)

app.ws('/chat', function(ws, req) {
  ws.on('message', function(msg) {
    expressWs.getWss().clients.forEach(client => client.send(msg))
  })
})
...

Rest is in the pages/index.vue.

Good way to check this solution

  1. Run application.
npm i
npm run dev

  1. Open http://localhost:3000/ in two browsers.

  2. Change nickname at least in one of pages with chat.

  3. Enjoy :-)