先安装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>
运行截图如下：
退出：
