[Nodejs] Build live chat with Socket.io with EXPRESS4

Source: Internet
Author: User
Tags emit sendmsg live chat

Socket.io provides the necessary support for WebSockets, a newer web technology, that includes both client and server-side modules in order to establish communication channels and, of course, to exist as middleware.

1 Create aExpress Project

????????? ????? Anti-tool hotlinking Crawl "If this text is displayed, represent the forwarding from a third party" Freddon all ??? ???????????

You can initialize an express project with the command line

Install Express First

NPM Install EXPRESSNPM install express-generatorexpress project name CD project name NPM install Socket.io

You can also create a new Express project under Webstorm file-new Project-node.js Express App

After creating the file view it's probably like this.


2 Service side Modify the default file contents

Modify the Index.js in the Routes folder to Chat.js

Var express = require (' Express '); var router = express. Router (); Var socket_io = require (' Socket.io ');/* get users listing. */ Router.get ('/', function  (req, res, next)  {    res.send (' Respond  with a resource ');}); router.preparesocketio = function  (server)  {    var io =  socket_io.listen (server);     io.sockets.on (' Connection ', function  (socket)  {        socket.on (' Join ', function  (user)  {             socket.user = user;             socket.emit (' state ',  ' SERVER ',  true);             socket.broadcast.emit (' State ',   ' SERVER ',  user +  ' on-line ');         });         socket.on (' sendmsg ', function  (msg)  {             socket.emit (' chat ',  socket.user, msg);             socket.broadcast.emit (' chat ',  socket.user, msg);         });     }); module.exports = router;


Modifying the App.js

var index = require ('./routes/index '); App.use ('/index ', index);

For

var chat = require ('./routes/chat '); App.use ('/chat ', chat);

The next step is to write a method in App.js that is used to pass the server

App.ready=function (server) {chat.preparesocketio (server);}; Module.exports = app;


Go to bin/www and add content:

var server = Http.createserver (app); App.ready (server); Add this sentence


3 Client

Web page mates Socket.io, client.html the page is placed under the public folder

<! Doctype html>


4 Testing

The default port number in the WWW file is 3000

Run Bin/www

CD Binnode www

or right-click Run ' bin/www ' in Webstorm


Next, use your browser to open two (+) tags to access http://localhost:3000/client.html (if you test the LAN, replace localhost with the server's IP, same as below)

First enter the user separately, then can enter the text to chat, other on-line, the message reminder function I deleted, only to keep the chat.

Put a picture:

Problems that may occur:

Web page load Socket.io 404

Do not modify src in script if it is not accessed with Port 3000

If http://localhost:63342/Project/public/client.html please modify the src of Socket.io script to

<script src= "Http://localhost:3000/socket.io/socket.io.js" ></script>

This example code has been relatively small, too troublesome words need source code please email: [Email protected];

Reprint Please specify: http://my.oschina.net/freddon/blog/529599

[Nodejs] Build live chat with Socket.io with EXPRESS4

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.