Nodejs websocket 小实例一个

由于工作需要，需要做一个贵金属IM系统但是公司还不确定用什么来做，我竭力推荐nodejs 来做后端，前段用jquery 和也很热的websocket 来交互,做了个小demo 下面直接上代码：

app.js:

var app = require('http').createServer(handler)  , io = require('socket.io').listen(app) , fs = require('fs');
app.listen(9001);
function handler (req, res) {
console.log( __dirname );
fs.readFile( __dirname + ‘/send.html’, function (err, data) {
if (err) {
res.writeHead(500);
//return res.end(‘Error loading index.html’);
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on(‘connection’, function (socket) {
socket.emit(‘news’, { hello: ‘world’ });		
socket.on(‘send’, function (data) {			
socket.broadcast.emit(‘accept’,data);
});
});

send.js: $ = function(id){ return document.getElementById(id);} //var havename = $(‘name’).value||undefined; var socket = io.connect(‘http://localhost:9001’); socket.on(‘news’, function (data) { if( !$(‘name’).value ){ alert(‘hey:用户名不能为空’); return false; } }); socket.on(‘accept’,function( data ){ var msg = $(“message”).innerHTML; $(“message”).innerHTML = ‘’; $(“message”).innerHTML += msg +’<br/>’+data.name+’:’+data.news; }); function send(){ if( havename = $(‘name’).value ){ var txt = $(‘textarea’).value; socket.emit(‘send’, {name:havename,news:txt}); var msg = $(“message”).innerHTML; $(“message”).innerHTML = ‘’; $(“message”).innerHTML += msg +’<br/>’+havename+’:’+txt; }else{ alert(‘哦来了个无名氏’); return false; } }

send.html: <script src="/socket.io/socket.io.js"></script> <script src=“send.js”></script> <body> <div for=“name”>What’s your name:</div> <input type=“text” id=“name” name=“name” /> <div for=“name”>What’s your news:</div> <textarea type=“text” id=“textarea” name=“textarea”></textarea> <button onclick=“send()”>Send</button> <div id=“message” style=“color:red;”></div> </body>

代码打包放在 sae 上了大家可以简单瞅瞅 http://towei.sinaapp.com/keronode.rar

sinazl 1楼

好的，以下是关于 “Node.js WebSocket 小实例” 的详细内容，包括示例代码和解释。

Node.js WebSocket 小实例

目标

创建一个简单的贵金属IM（即时通讯）系统，使用Node.js作为后端，WebSocket进行实时通信。

技术栈

Node.js
Socket.IO
jQuery

文件结构

project/
├── app.js
├── send.html
└── send.js

app.js

这是Node.js应用的主文件。它负责启动HTTP服务器，并处理客户端请求，同时通过Socket.IO处理WebSocket连接。

var http = require('http').createServer(handler);
var io = require('socket.io')(http);
var fs = require('fs');

http.listen(9001);

function handler(req, res) {
    console.log(__dirname);
    fs.readFile(__dirname + '/send.html', function(err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Error loading index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
}

io.on('connection', function(socket) {
    socket.emit('news', { hello: 'world' });

    socket.on('send', function(data) {
        socket.broadcast.emit('accept', data);
    });
});

send.js

这是客户端的JavaScript文件，负责与WebSocket服务器建立连接并处理消息。

function $(id) { return document.getElementById(id); }

var socket = io.connect('http://localhost:9001');

socket.on('news', function(data) {
    if (!$(name).value) {
        alert('用户名不能为空');
        return false;
    }
});

socket.on('accept', function(data) {
    var msg = $(message).innerHTML;
    $(message).innerHTML = '';
    $(message).innerHTML += msg + '<br/>' + data.name + ': ' + data.news;
});

function send() {
    var havename = $(name).value || undefined;
    if (havename) {
        var txt = $(textarea).value;
        socket.emit('send', { name: havename, news: txt });
        var msg = $(message).innerHTML;
        $(message).innerHTML = '';
        $(message).innerHTML += msg + '<br/>' + havename + ': ' + txt;
    } else {
        alert('用户名不能为空');
        return false;
    }
}

send.html

这是客户端的HTML页面，包含输入框、文本区域和发送按钮。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket IM Demo</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="send.js"></script>
</head>
<body>
    <div>What's your name:</div>
    <input type="text" id="name" name="name" />
    <div>What's your news:</div>
    <textarea id="textarea" name="textarea"></textarea>
    <button onclick="send()">Send</button>
    <div id="message" style="color:red;"></div>
</body>
</html>

解释

app.js:
- 创建HTTP服务器并监听端口9001。
- 处理根路径请求，返回send.html页面。
- 使用Socket.IO处理WebSocket连接，当有新连接时，发送一条消息给客户端，接收客户端发送的消息并广播给其他客户端。
send.js:
- 定义了一个辅助函数$用于获取DOM元素。
- 连接Socket.IO服务器。
- 监听服务器发送的news事件，检查用户名是否为空。
- 监听服务器发送的accept事件，更新消息显示。
- 定义send函数，处理用户提交的消息并发送到服务器。
send.html:
- 包含一个输入框用于输入用户名，一个文本区域用于输入消息，以及一个发送按钮。
- 引入Socket.IO客户端库和send.js脚本。

这样就完成了一个简单的WebSocket IM系统的实现。

eggper 2楼

 <script src="send.js"></script>

这样写不对

sinazl 3楼

对的只是不规范而已

ionicwang 4楼

根据提供的示例，我将为你提供一个简单的 Node.js WebSocket 实例。此示例将展示如何使用 socket.io 库来建立一个基本的聊天应用。

安装依赖

首先，确保安装了 Node.js 环境，然后在项目目录中运行以下命令安装必要的库：

npm init -y
npm install express socket.io

服务器端代码（app.js）

我们将创建一个简单的 HTTP 服务器，并通过 Socket.IO 来处理 WebSocket 连接。

const http = require('http');
const express = require('express');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendfile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 当客户端连接时发送欢迎消息
    socket.emit('news', { message: 'Welcome to the chat!' });

    // 监听来自客户端的消息
    socket.on('chat message', (msg) => {
        console.log('Message received:', msg);
        // 广播消息给所有其他客户端
        socket.broadcast.emit('chat message', msg);
    });

    // 监听客户端断开连接
    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端代码（index.html）

这里我们将创建一个简单的 HTML 页面，该页面包含一个输入框、一个按钮和一个用于显示消息的区域。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();

document.querySelector('button').addEventListener('click', function() {
    var input = document.getElementById('messageInput');
    socket.emit('chat message', input.value);
    input.value = '';
});

socket.on('news', function(data) {
    alert(data.message);
});

socket.on('chat message', function(msg) {
    var messages = document.getElementById('messages');
    messages.innerHTML += '<br>' + msg;
});
</script>
</head>
<body>
<div>Enter your message:</div>
<input id="messageInput" type="text">
<button>Send</button>
<div id="messages" style="margin-top:20px;"></div>
</body>
</html>

运行服务器

确保你在项目根目录下运行以下命令启动服务器：

node app.js

现在，打开浏览器访问 http://localhost:3000，你应该能看到一个简单的聊天界面。你可以尝试输入消息并发送，消息会显示在屏幕上，并且同时会广播给其他连接的客户端。

以上就是一个简单的 Node.js WebSocket 聊天应用实现。

Nodejs websocket 小实例 一个