socket.io 实现网页聊天

最新推荐文章于 2021-09-09 12:18:38 发布

konglingbin66

最新推荐文章于 2021-09-09 12:18:38 发布

阅读量586

点赞数

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/konglingbin66/article/details/41494003

版权

nodejs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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》

konglingbin66

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
socket.io 实现网页聊天

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
复制链接

扫一扫