2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Node.js笔记-使用socket.io构建websocket聊天室

Node.js笔记-使用socket.io构建websocket聊天室

时间:2019-01-29 13:45:47

相关推荐

Node.js笔记-使用socket.io构建websocket聊天室

先安装socket.io

npm install socket.io

服务端代码:

let app = require('http').createServer();let io = require('socket.io')(app, { cors: true });let port = 3000;let clientCount = 0;app.listen(port);io.on('connection', function (socket) {clientCount++;socket.nickname = 'user' + clientCount;io.emit('enter', socket.nickname + ' comes in');socket.on('message', function (str) {io.emit('message', socket.nickname + ' says: ' + str);})socket.on('disconnect', function () {io.emit('leave', socket.nickname + ' left');})});console.log("Websocket server listening on port = " + port)

客户端代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>WebSocketIO</title><script src="https://cdn.socket.io/4.0.1/socket.io.js"></script></head><body><h1>Chat Room</h1><input id="sendTxt" type="text" /><button id="sendBtn">发送</button><script type="text/javascript">let socket = io("ws://localhost:3000/");function showMessage(str, type){let div = document.createElement('div');div.innerHTML = str;if(type == "enter"){div.style.color = "blue";}else if(type == "leave"){div.style.color = "red";}document.body.appendChild(div);}document.getElementById("sendBtn").onclick = function () {let txt = document.getElementById("sendTxt").value;if(txt){console.log(txt)socket.emit('message', txt);}}socket.on('enter', function (data) {showMessage(data, 'enter');})socket.on('message', function (data) {showMessage(data, 'message');})socket.on('leave', function (data) {showMessage(data, 'leave');})</script></body></html>

运行截图如下:

退出:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。