socket.io 实现网页聊天

来源：互联网发布：java中的thread.sleep 编辑：程序博客网时间：2024/05/16 11:50

1.服务端

首先看看依赖文件：

{"name":"ws-echo","version":"0.0.1","dependencies":{"express":"2.5.1","socket.io":"0.9.2" }}

然后是服务器代码：

var express = require('express');var sio = require('socket.io');var app = express.createServer();app.use(express.bodyParser());app.use(express.static('public'));app.listen(3000);var io = sio.listen(app);io.sockets.on('connection',function(socket){console.log('someone connected');socket.on('join',function(name){console.log("%s  join",name);socket.nickname = name;socket.broadcast.emit('announcement',name + '  joined the chat.');});socket.on('text',function(msg){socket.broadcast.emit('text',socket.nickname,'  '+msg);});});

sio.listen (app)是将socket.io绑定到APP的，这样就可以为所欲为了。最爽的事情是，通信可以通过相应字符串标示的类型进行处理，如‘join’、‘text’.

2.客户端

客户端的文件放在public 文件夹下，工程文件大致如下图所示

接下来看看客户端的3个文件:

index.html

<!doctype html><html><head><title>Socket.IO chat</title><script src="/socket.io/socket.io.js"></script><script src="/chat.js"></script><link href="/chat.css" rel ="stylesheet"/></head><body><div id ="chat"><ul id="messages"></ul><form id="form"><input type = "text" id="input"/><button>Send</button></form></div></body></html>

通过src可以将js文件放在服务器端，支出相对路劲。但是这个socket.io/socket.io.js让我有点疑惑，服务器并没有这个路径，但是没有这个src，客户端是无法正常工作的。<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

chat.css

/*...*/#chat { display: none}

chat.js

window.onload = function(){var socket = io.connect();socket.on('connect',function(){socket.emit('join',prompt('what is your nickname?'));document.getElementById('chat').style.display = 'block';});socket.on('announcement',function(msg){var li = document.createElement('li');li.className = 'announcement';li.innerHTML = msg;document.getElementById('messages').appendChild(li);});function addMessage(from,text){var li = document.createElement('li');li.className = 'message';li.innerHTML = '<b>' + from +'</b>' + text;document.getElementById('messages').appendChild(li);}var input = document.getElementById('input');document.getElementById('form').onsubmit = function(){addMessage('me  ',input.value);socket.emit('text',input.value);input.value = '';input.focus();return false;};socket.on('text',addMessage);}

io.connect 应该是建立一个socket.io的链接，这个通信过程使用的应该是websocket。prompt的作用是弹出一个提示框，输入nickname，包含一个ok按钮和一个cancel按钮，如果点击ok按钮，会将输入作为返回值。

参考：《了不起的Node.js》

0 0