摘要:首先将的包拷贝到你的项目文件下,并在部分使用标签将其添加进去使用专业的函数创建一个端点当在消息框输入消息并点击发送按钮时,客户端就将向服务器端发送输入的消息,消息类型是。
我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉神清气爽,顿感从无尽的回调函数中解脱出来,今天我将继续就多人聊天室这个demo来和大家分享一下如何利用socket.io来创建它。
安装socket.io所需的包众所周知,node.js采用了包结构进行管理,所以我们在使用一些模块(modules)时必须使用npm(install package managment,即安装包管理工具)安装socket.io,安装时仍需安装在你的node.js中npm的node_modules目录下,例如在我的电脑中的安装路径是这样的:D:Node.jsnode_modulesnpmnode_modules
最后只有npm install -g socket.io安装socket.io(必须使用-g进行全局安装),接下来进行项目的编写。
创建客户端客户端如下:
websocket
【1】
ChatRoom
【2】 var socket = io("ws://localhost:3000");
document.getElementById("sendBtn").onclick = function() { var txt = document.getElementById("sendTxt").value; if(txt){
【3】 socket.emit("message",txt);
} } **socket.on("enter",function(data){
【4】 showMessage(data,"enter");
})** **socket.on("message",function(data){
【5】 showMessage(data,"message");
})** **socket.on("left",function(data){ showMessage(data,"left");
【6】 })**
function showMessage(str,type) { var div = document.createElement("div"); div.innerHTML = str; if(type=="enter"){ div.style.color = "blue"; }else if(type=="left"){ div.style.color = "red"; } document.body.appendChild(div); }
说明:代码中重要的部分我都进行了加粗并进行编号,下面我们来分析这些重要的代码。
首先将socket.io的包拷贝到你的项目文件下,并在head部分使用script标签将其添加进去
使用socket.io专业的函数创建一个websocket端点
当在消息框输入消息并点击发送按钮时,客户端就将向服务器端发送输入的消息,消息类型是message。
当有新的用户进入聊天室时,服务器就会向全部的客户端广播这样一条消息:userxx comes in
当任意一个客户端向服务器发送消息时,服务器就会将这条消息广播给全部的客户端。
当有任一客户端离开时,服务器就会向全部客户端广播这样一条消息:userxx left
创建服务器端服务器端代码:
【1】 var app = require("http").createServer()
【2】 var io = require("socket.io")(app)
var PORT = 3000 var clientCount = 0
【3】 app.listen(PORT)
【4】 io.on("connection",function(socket){
clientCount++ socket.nickname = "user"+clientCount
【5】 io.emit("enter",socket.nickname+" comes in")
【6】 socket.on("message",function(str){
**io.emit("message",socket.nickname+" say:"+str)** })
【7】 socket.on("disconnect",function(){
io.emit("left",socket.nickname+" left") }) }) console.log("websocket listening on port:"+PORT)
很显然使用了socket.io来创建服务器端非常简洁、方便,大家是不是感觉这代码看起来就很清爽呀。代码中的重要部分我都进行了加粗标记及编号处理,下面我跟大家分享一下重要的代码。
首先我们需要一个绑定使用http协议的变量:app
接下来我们还需要创建一个使用socket.io这个modules的变量并且绑定http变量
这个绑定了http的变量也需要监听服务器端的端口号
当有一个客户端与服务器端进行连接时就调用回调函数
接下来当触发“enter”事件时服务器端向客户端广播这样一条消息:userxx comes in
当有客户端向服务器端发送消息时就会触发message事件,这时服务器端向全部客户端广播该客户端向服务器端发送的消息。
当有客户端关闭时socket.io就会调用自身的disconnect事件,并且向全部客户端广播这样一条消息,userxx left。
以上就是关于我分享使用socket.io来创建一个简单的多人聊天室的一个小demo,以为大家积极评论。最后附上项目运行的结果截图及源码下载地址。
项目源码地址是:
链接:http://pan.baidu.com/s/1qXVhYuo 密码:2x2c
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/61901.html
摘要:首先将的包拷贝到你的项目文件下,并在部分使用标签将其添加进去使用专业的函数创建一个端点当在消息框输入消息并点击发送按钮时,客户端就将向服务器端发送输入的消息,消息类型是。 我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉...
摘要:免费全网独家这是一份非常值得珍藏的知识体系一简述是一个完全由实现基于支持的协议用于实时通信跨平台的开源框架,它包括了客户端的和服务器端的。基于实现聊天功能最后,感谢你的到来,恭喜你,坚持到了最后,该文和源码若有不当之处,请予以斧正。 【免费】全网独家:这是一份非常值得珍藏的Android知识体系!!! 一、简述 Socket.IO是一个完全由JavaScript实现、基...
摘要:的总结在一个聊天室系统中,常常使用作为通信的主要方式。服务端对客户端所发送的请求进行处理登陆验证等操作在这里,通过来接受客户端所传递的数据,为相同方法名,其后跟的函数为登陆验证的具体操作,比如用户验证是否存在。 websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式。参考地址:https://www.jianshu.com/p/00e... 关于自...
阅读 2452·2021-11-15 18:14
阅读 1682·2021-10-14 09:42
阅读 3670·2021-10-11 10:58
阅读 3909·2021-10-09 09:44
阅读 2367·2021-09-26 09:55
阅读 2389·2021-09-24 10:38
阅读 1997·2021-09-04 16:48
阅读 3239·2021-09-02 15:21