Home > Article > Web Front-end > node.js uses socket to implement chat instance sharing
This article mainly introduces the sample code of node.js using socket to implement chatting. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Server setup
app.js
##
const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log("服务端已经启动,请访问 http://localhost:8001"); });express.js
const url=require("url"); const fs=require("fs"); function express(req,res){ var urlObj=url.parse(req.url); //console.log(urlObj); var filePath="./www"+urlObj.pathname; var content="not found"; if(fs.existsSync(filePath)){ content=fs.readFileSync(filePath); } res.end(content.toString()); } module.exports=express;index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> <script src="js/lib/jquery-1.11.1.js"></script> <script src="js/lib/socket.io.js"></script> <script src="js/index.js"></script> </body> </html>
Client service establishment and server communication
io.on('connection', function(socket){ console.log('a user connected'); //断开连接 socket.on('disconnect', function(){ console.log('user disconnected'); }); });index.js
//客户端建立连接 var socket = io(); 客户端向服务端发送请求 index.js $('form').submit(function(){ //触发事件 socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; });app.js
//接收客户端的信息 socket.on('chat message', function(msg){ console.log('message: ' + msg); });Broadcast the data from the server to the client
socket.on('chat message', function(msg){ console.log('message: ' + msg); socket.broadcast.emit("clientE",msg); });The client receives the data broadcast from the server
socket.on('clientE', function(msg){ $('#messages').append($('<li>').text(msg)); });Related recommendations:
nodejs implements WebSocket chat function based on WS module
jquery imitates WeChat Chat interface example sharing
Example detailed explanation of vue component parent-child communication chat room
The above is the detailed content of node.js uses socket to implement chat instance sharing. For more information, please follow other related articles on the PHP Chinese website!